From fb5c6310375c50ba5a9f039a690a9821a63fea96 Mon Sep 17 00:00:00 2001
From: Daniel Holbert <dholbert@cs.stanford.edu>
Date: Thu, 5 Dec 2013 10:57:52 -0800
Subject: [PATCH] Bug 939901 part 8: Reftests for multi-line flexbox layout.
 r=mats

--HG--
rename : layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html => layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html
rename : layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html => layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html
rename : layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html => layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html
rename : layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html => layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html
rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-1-ref.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-1-ref.html
rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-1.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-1.html
rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-1-ref.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-2-ref.html
rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-1.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-2.html
---
 .../flexbox-multicol-vert-empty-2.html        |  28 ++++
 .../flexbox-unbreakable-child-1a-wrap.html    |  68 +++++++++
 .../flexbox-unbreakable-child-1b-wrap.html    |  68 +++++++++
 .../flexbox-unbreakable-child-1c-wrap.html    |  69 +++++++++
 .../flexbox-unbreakable-child-1d-wrap.html    |  70 +++++++++
 .../flexbox-unbreakable-child-2-ref.html      |  83 +++++++++++
 .../flexbox-unbreakable-child-2.html          |  82 +++++++++++
 .../reftests/flexbox/pagination/reftest.list  |  13 +-
 .../flexbox-align-content-horiz-1-ref.xhtml   | 129 ++++++++++++++++
 .../flexbox-align-content-horiz-1a.xhtml      | 138 +++++++++++++++++
 .../flexbox-align-content-horiz-1b.xhtml      | 139 ++++++++++++++++++
 .../flexbox-align-content-vert-1-ref.xhtml    | 132 +++++++++++++++++
 .../flexbox-align-content-vert-1a.xhtml       | 138 +++++++++++++++++
 .../flexbox-align-content-vert-1b.xhtml       | 139 ++++++++++++++++++
 ...exbox-baseline-multi-line-horiz-1-ref.html |  68 +++++++++
 .../flexbox-baseline-multi-line-horiz-1.html  |  83 +++++++++++
 ...exbox-baseline-multi-line-horiz-2-ref.html |  72 +++++++++
 .../flexbox-baseline-multi-line-horiz-2.html  |  83 +++++++++++
 .../flexbox-break-request-horiz-1-ref.html    |  98 ++++++++++++
 .../flexbox-break-request-horiz-1a.html       | 108 ++++++++++++++
 .../flexbox-break-request-horiz-1b.html       | 108 ++++++++++++++
 .../flexbox-break-request-horiz-2-ref.html    | 101 +++++++++++++
 .../flexbox-break-request-horiz-2a.html       | 107 ++++++++++++++
 .../flexbox-break-request-horiz-2b.html       | 107 ++++++++++++++
 .../flexbox-break-request-vert-1-ref.html     |  98 ++++++++++++
 .../flexbox-break-request-vert-1a.html        | 109 ++++++++++++++
 .../flexbox-break-request-vert-1b.html        | 109 ++++++++++++++
 .../flexbox-break-request-vert-2-ref.html     | 101 +++++++++++++
 .../flexbox-break-request-vert-2a.html        | 108 ++++++++++++++
 .../flexbox-break-request-vert-2b.html        | 108 ++++++++++++++
 .../flexbox-flex-wrap-horiz-1-ref.html        | 101 +++++++++++++
 .../flexbox/flexbox-flex-wrap-horiz-1.html    |  97 ++++++++++++
 .../flexbox-flex-wrap-horiz-2-ref.html        |  64 ++++++++
 .../flexbox/flexbox-flex-wrap-horiz-2.html    |  61 ++++++++
 .../flexbox/flexbox-flex-wrap-vert-1-ref.html | 102 +++++++++++++
 .../flexbox/flexbox-flex-wrap-vert-1.html     |  99 +++++++++++++
 .../flexbox/flexbox-flex-wrap-vert-2-ref.html |  59 ++++++++
 .../flexbox/flexbox-flex-wrap-vert-2.html     |  61 ++++++++
 .../w3c-css/submitted/flexbox/reftest.list    |  24 +++
 39 files changed, 3528 insertions(+), 4 deletions(-)
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multicol-vert-empty-2.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-1-ref.xhtml
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-1a.xhtml
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-1b.xhtml
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-1-ref.xhtml
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-1a.xhtml
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-1b.xhtml
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-1-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-1.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-2-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-2.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-1-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-1a.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-1b.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-2-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-2a.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-2b.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-1-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-1a.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-1b.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-2-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-2a.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-2b.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-1-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-1.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-2-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-2.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-1-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-1.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-2-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-2.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 00000000000..586b51db762
--- /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-1a-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html
new file mode 100644
index 00000000000..c2726f44ed9
--- /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: 20px;
+      -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-1b-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html
new file mode 100644
index 00000000000..df1837d937e
--- /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: 20px;
+      -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-1c-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html
new file mode 100644
index 00000000000..bd621dc0c85
--- /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: 20px;
+      -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-1d-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html
new file mode 100644
index 00000000000..95a9a0f8280
--- /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: 20px;
+      -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-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html
new file mode 100644
index 00000000000..d6cee758705
--- /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;
+      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 00000000000..8f7f984338c
--- /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;
+    }
+    </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.list b/layout/reftests/flexbox/pagination/reftest.list
index e35ea9c4a2f..31842d43df3 100644
--- a/layout/reftests/flexbox/pagination/reftest.list
+++ b/layout/reftests/flexbox/pagination/reftest.list
@@ -19,7 +19,12 @@
 == 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-1b.html flexbox-unbreakable-child-1-ref.html
-== flexbox-unbreakable-child-1c.html flexbox-unbreakable-child-1-ref.html
-== flexbox-unbreakable-child-1d.html flexbox-unbreakable-child-1-ref.html
+== 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
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-1-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-1-ref.xhtml
new file mode 100644
index 00000000000..c52f60d6de5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-1-ref.xhtml
@@ -0,0 +1,129 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        width: 20px;
+        height: 200px;
+        margin-right: 2px;
+        float: left;
+        background: lightgray;
+      }
+      div.a {
+        width: 20px;
+        height: 10px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        height: 30px;
+        background: pink;
+      }
+      div.c {
+        width: 20px;
+        height: 40px;
+        background: orange;
+      }
+
+      /* Inside of 'b': */
+      div.fixedSizeChild {
+        width: 10px;
+        height: 30px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (stretch) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b" style="margin-top:80px; height:110px"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b" style="margin-top:40px; height: 70px"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 160px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 120px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 80px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 60px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b" style="margin-top: 160px"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b" style="margin-top: 60px"><div class="fixedSizeChild"/></div>
+      <div class="c" style="margin-top: 60px"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 40px"/>
+      <div class="b" style="margin-top: 80px"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 20px"/>
+      <div class="b" style="margin-top: 40px"><div class="fixedSizeChild"/></div>
+      <div class="c" style="margin-top: 40px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-1a.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-1a.xhtml
new file mode 100644
index 00000000000..7537e381541
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-1a.xhtml
@@ -0,0 +1,138 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines,
+     testing each possible value of the 'align-content' property. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'align-content' in a horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#align-content-property"/>
+    <link rel="match" href="flexbox-align-content-horiz-1-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        width: 20px; /* Skinny, to force us to wrap */
+        height: 200px;
+        display: flex;
+        flex-wrap: wrap;
+        margin-right: 2px;
+        float: left;
+        background: lightgray;
+      }
+      div.a {
+        width: 20px;
+        height: 10px;
+        flex: none;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        height: auto; /* height comes from contents */
+        flex: none;
+        background: pink;
+      }
+      div.c {
+        width: 20px;
+        height: 40px;
+        flex: none;
+        background: orange;
+      }
+
+      /* Inside of 'b': */
+      div.fixedSizeChild {
+        width: 10px;
+        height: 30px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (stretch) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-1b.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-1b.xhtml
new file mode 100644
index 00000000000..1fd8c318056
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-1b.xhtml
@@ -0,0 +1,139 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines,
+     testing each possible value of the 'align-content' property. Additionally,
+     the flex container derives its width from the "max-width" property. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'align-content' in a horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#align-content-property"/>
+    <link rel="match" href="flexbox-align-content-horiz-1-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        max-width: 20px; /* Skinny, to force us to wrap */
+        height: 200px;
+        display: flex;
+        flex-wrap: wrap;
+        margin-right: 2px;
+        float: left;
+        background: lightgray;
+      }
+      div.a {
+        height: 10px;
+        width: 20px;
+        flex: none;
+        background: lightgreen;
+      }
+      div.b {
+        height: auto; /* height comes from contents */
+        width: 20px;
+        flex: none;
+        background: pink;
+      }
+      div.c {
+        height: 40px;
+        width: 20px;
+        flex: none;
+        background: orange;
+      }
+
+      /* Inside of 'b': */
+      div.fixedSizeChild {
+        width: 10px;
+        height: 30px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (stretch) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-1-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-1-ref.xhtml
new file mode 100644
index 00000000000..a92f0c9c0c0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-1-ref.xhtml
@@ -0,0 +1,132 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        margin-bottom: 2px;
+        background: lightgray;
+        height: 20px;
+        clear: all;
+      }
+      div.a {
+        width: 10px;
+        height: 20px;
+        background: lightgreen;
+        float: left;
+      }
+      div.b {
+        width: 30px;
+        height: 20px;
+        background: pink;
+        float: left;
+      }
+      div.c {
+        width: 40px;
+        height: 20px;
+        background: orange;
+        float: left;
+      }
+
+      /* Inside of 'b': */
+      div.fixedSizeChild {
+        width: 30px;
+        height: 10px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (stretch) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b" style="margin-left:80px; width:110px"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b" style="margin-left: 40px; width: 70px"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 160px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 120px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 80px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 60px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b" style="margin-left: 160px"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b" style="margin-left: 60px"><div class="fixedSizeChild"/></div>
+      <div class="c" style="margin-left: 60px"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 40px"/>
+      <div class="b" style="margin-left: 80px"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 20px"/>
+      <div class="b" style="margin-left: 40px"><div class="fixedSizeChild"/></div>
+      <div class="c" style="margin-left: 40px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-1a.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-1a.xhtml
new file mode 100644
index 00000000000..bc1e062c3bf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-1a.xhtml
@@ -0,0 +1,138 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a series of vertical flex containers, with 1-3 flex lines,
+     testing each possible value of the 'align-content' property. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'align-content' in a vertical flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#align-content-property"/>
+    <link rel="match" href="flexbox-align-content-vert-1-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        height: 20px; /* Short, to force us to wrap */
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        margin-bottom: 2px;
+        background: lightgray;
+      }
+      div.a {
+        width: 10px;
+        height: 20px;
+        flex: none;
+        background: lightgreen;
+      }
+      div.b {
+        width: auto; /* width comes from contents */
+        height: 20px;
+        flex: none;
+        background: pink;
+      }
+      div.c {
+        width: 40px;
+        height: 20px;
+        flex: none;
+        background: orange;
+      }
+
+      /* Inside of 'b': */
+      div.fixedSizeChild {
+        width: 30px;
+        height: 10px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (stretch) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-1b.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-1b.xhtml
new file mode 100644
index 00000000000..5dc1ed61581
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-1b.xhtml
@@ -0,0 +1,139 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a series of vertical flex containers, with 1-3 flex lines,
+     testing each possible value of the 'align-content' property. Additionally,
+     the flex container derives its height from the "max-height" property.-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'align-content' in a vertical flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#align-content-property"/>
+    <link rel="match" href="flexbox-align-content-vert-1-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        max-height: 20px; /* Short, to force us to wrap */
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        margin-bottom: 2px;
+        background: lightgray;
+      }
+      div.a {
+        width: 10px;
+        height: 20px;
+        flex: none;
+        background: lightgreen;
+      }
+      div.b {
+        width: auto; /* width comes from contents */
+        height: 20px;
+        flex: none;
+        background: pink;
+      }
+      div.c {
+        width: 40px;
+        height: 20px;
+        flex: none;
+        background: orange;
+      }
+
+      /* Inside of 'b': */
+      div.fixedSizeChild {
+        width: 30px;
+        height: 10px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (stretch) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-1-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-1-ref.html
new file mode 100644
index 00000000000..5d61428160e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-1-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case, using inline-block instead of inline-flex, and with the
+     baseline-aligned items aligned using specific font-size / line-heights,
+     and with unaligned children taken out of baseline-alignment using
+     "vertical-align:top".
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-baselines">
+  <link rel="match" href="flexbox-baseline-multi-line-horiz-1-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-block;
+      flex-wrap: wrap;
+      width: 40px;
+      height: 40px;
+      background: lightblue;
+    }
+    .flexContainer > * {
+      width: 18px;
+      display: inline-block;
+    }
+
+    .smallFont {
+      font-size: 8px;
+      line-height: 8px;
+    }
+    .medFont {
+      font-size: 12px;
+      line-height: 12px;
+    }
+    .bigFont {
+      font-size: 16px;
+      line-height: 16px;
+    }
+    .unaligned { vertical-align: top }
+  </style>
+</head>
+<body>
+  a
+  <!-- Flex containers with flex items that have a mix of baselines: -->
+  <div class="flexContainer medFont">
+    <div class="medFont">b</div
+    ><div class="bigFont unaligned">c</div>
+  </div>
+
+  <div class="flexContainer bigFont">
+    <div class="bigFont">f</div
+    ><div class="smallFont unaligned">g</div>
+  </div>
+
+  <!-- Flex container with second line baseline-aligned
+       (shouldn't make a difference) -->
+  <div class="flexContainer smallFont">
+    <div class="smallFont">j</div
+    ><div class="bigFont unaligned">k</div>
+  </div>
+  n
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-1.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-1.html
new file mode 100644
index 00000000000..3ba36e4b3c8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-1.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 compute the baseline of a horizontal flex container
+     with several flex lines.
+     The spec says this about this case:
+      [Given that the first line has no baseline-aligned items:]
+       ...if the flex container has at least one flex item, and its
+       first flex item has a baseline parallel to the flex
+       container's main axis, the flex container's main-axis
+       baseline is that baseline.
+-->
+<html>
+<head>
+  <title>CSS Test: Testing the baseline of a horizontal flex container with multiple flex lines</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-baselines">
+  <link rel="match" href="flexbox-baseline-multi-line-horiz-1-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-flex;
+      flex-wrap: wrap;
+      width: 40px;
+      height: 40px;
+      background: lightblue;
+    }
+    .flexContainer > * {
+      width: 18px;
+    }
+
+    /* We'll make the second flex line not paint anything, so that the
+       reference case doesn't need to bother matching it. */
+    .flexContainer > *:nth-child(3),
+    .flexContainer > *:nth-child(4) {
+      visibility: hidden;
+    }
+
+    .smallFont {
+      font-size: 8px;
+      line-height: 8px;
+    }
+    .medFont {
+      font-size: 12px;
+      line-height: 12px;
+    }
+    .bigFont {
+      font-size: 16px;
+      line-height: 16px;
+    }
+  </style>
+</head>
+<body>
+  a
+  <!-- Flex containers with flex items that have a mix of baselines: -->
+  <div class="flexContainer">
+    <div class="medFont">b</div
+    ><div class="bigFont">c</div
+    ><div class="bigFont">d</div
+    ><div class="medFont">e</div>
+  </div>
+
+  <div class="flexContainer">
+    <div class="bigFont">f</div
+    ><div class="smallFont">g</div
+    ><div class="medFont">h</div
+    ><div class="bigFont">i</div>
+  </div>
+
+  <!-- Flex container with second line baseline-aligned
+       (shouldn't make a difference) -->
+  <div class="flexContainer">
+    <div class="smallFont">j</div
+    ><div class="bigFont">k</div
+    ><div class="bigFont" style="align-self: baseline">l</div
+    ><div class="medFont" style="align-self: baseline">m</div>
+  </div>
+  n
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-2-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-2-ref.html
new file mode 100644
index 00000000000..f6bd1ee4716
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-2-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case, using inline-block instead of inline-flex, and with the
+     baseline-aligned items aligned using specific font-size / line-heights,
+     and with unaligned children taken out of baseline-alignment using
+     "vertical-align:top".
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-baselines">
+  <link rel="match" href="flexbox-baseline-multi-line-horiz-1-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-block;
+      flex-wrap: wrap;
+      width: 40px;
+      /* Split testcase's 40px height into 20px of padding-top and 20px of
+         height, to set aside space for the testcase's (invisible) second line
+         (which is above the first line, since this is wrap-reverse) */
+      height: 20px;
+      padding-top: 20px;
+      background: lightblue;
+    }
+    .flexContainer > * {
+      width: 18px;
+      display: inline-block;
+    }
+
+    .smallFont {
+      font-size: 8px;
+      line-height: 8px;
+    }
+    .medFont {
+      font-size: 12px;
+      line-height: 12px;
+    }
+    .bigFont {
+      font-size: 16px;
+      line-height: 16px;
+    }
+    .unaligned { vertical-align: top }
+  </style>
+</head>
+<body>
+  a
+  <!-- Flex containers with flex items that have a mix of baselines: -->
+  <div class="flexContainer medFont">
+    <div class="medFont">b</div
+    ><div class="bigFont unaligned">c</div>
+  </div>
+
+  <div class="flexContainer bigFont">
+    <div class="bigFont">f</div
+    ><div class="smallFont unaligned">g</div>
+  </div>
+
+  <!-- Flex container with second line baseline-aligned
+       (shouldn't make a difference) -->
+  <div class="flexContainer smallFont">
+    <div class="smallFont">j</div
+    ><div class="bigFont unaligned">k</div>
+  </div>
+  n
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-2.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-2.html
new file mode 100644
index 00000000000..9e4befc4914
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-2.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 compute the baseline of a horizontal flex container
+     with several flex lines (wrapping in the reverse direction).
+     The spec says this about this case:
+      [Given that the first line has no baseline-aligned items:]
+       ...if the flex container has at least one flex item, and its
+       first flex item has a baseline parallel to the flex
+       container's main axis, the flex container's main-axis
+       baseline is that baseline.
+-->
+<html>
+<head>
+  <title>CSS Test: Testing the baseline of a horizontal flex container with multiple flex lines</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-baselines">
+  <link rel="match" href="flexbox-baseline-multi-line-horiz-2-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-flex;
+      flex-wrap: wrap-reverse;
+      width: 40px;
+      height: 40px;
+      background: lightblue;
+    }
+    .flexContainer > * {
+      width: 18px;
+    }
+
+    /* We'll make the second flex line not paint anything, so that the
+       reference case doesn't need to bother matching it. */
+    .flexContainer > *:nth-child(3),
+    .flexContainer > *:nth-child(4) {
+      visibility: hidden;
+    }
+
+    .smallFont {
+      font-size: 8px;
+      line-height: 8px;
+    }
+    .medFont {
+      font-size: 12px;
+      line-height: 12px;
+    }
+    .bigFont {
+      font-size: 16px;
+      line-height: 16px;
+    }
+  </style>
+</head>
+<body>
+  a
+  <!-- Flex containers with flex items that have a mix of baselines: -->
+  <div class="flexContainer">
+    <div class="medFont">b</div
+    ><div class="bigFont">c</div
+    ><div class="bigFont">d</div
+    ><div class="medFont">e</div>
+  </div>
+
+  <div class="flexContainer">
+    <div class="bigFont">f</div
+    ><div class="smallFont">g</div
+    ><div class="medFont">h</div
+    ><div class="bigFont">i</div>
+  </div>
+
+  <!-- Flex container with second line baseline-aligned
+       (shouldn't make a difference) -->
+  <div class="flexContainer">
+    <div class="smallFont">j</div
+    ><div class="bigFont">k</div
+    ><div class="bigFont" style="align-self: baseline">l</div
+    ><div class="medFont" style="align-self: baseline">m</div>
+  </div>
+  n
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-1-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-1-ref.html
new file mode 100644
index 00000000000..642c1e3d1c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-1-ref.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      border: 1px dashed black;
+      width: 60px;
+      height: 20px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      width: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+    div.fullCrossSize {
+      height: 18px;
+    }
+    div.halfCrossSize {
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <div class="flexbox">
+    <div class="item fullCrossSize" style="float: left"></div>
+    <div class="item fullCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize" style="float: left"></div>
+    <div class="item fullCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize"></div>
+    <div class="item halfCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize"></div>
+    <div class="item halfCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize"></div>
+    <div class="item halfCrossSize"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-1a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-1a.html
new file mode 100644
index 00000000000..f797631b43f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-1a.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing page-break-before in horizontal multi-line flex containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#algo-line-break">
+  <link rel="match" href="flexbox-flex-wrap-horiz-3-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-wrap: wrap;
+      border: 1px dashed black;
+      width: 60px;
+      height: 20px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      width: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- page-break-before specified on first (and only) item, at a point where
+       we're already "breaking" (the beginning): -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-before specified on second item, at a point where breaking
+       would otherwise be unnecessary: -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-before specified on third item, at a point where breaking
+       is already necessary: -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-1b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-1b.html
new file mode 100644
index 00000000000..cb8ab0cf5e8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-1b.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing page-break-after in horizontal multi-line flex containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#algo-line-break">
+  <link rel="match" href="flexbox-flex-wrap-horiz-3-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-wrap: wrap;
+      border: 1px dashed black;
+      width: 60px;
+      height: 20px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      width: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- page-break-after specified on first (and only) item, at a point where
+       we're already "breaking" (the end): -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: avoid"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-after specified on first item, at a point where breaking
+       would otherwise be unnecessary: -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: auto"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: avoid"></div>
+    <div class="item"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: always"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: left"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: right"></div>
+    <div class="item"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-after specified on second item, at a point where breaking
+       is already necessary: -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: auto"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: avoid"></div>
+    <div class="item"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: always"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: left"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: right"></div>
+    <div class="item"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-2-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-2-ref.html
new file mode 100644
index 00000000000..28943c5085c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-2-ref.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      border: 1px dashed black;
+      width: 60px;
+      height: 20px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      width: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+    div.fullCrossSize {
+      height: 18px;
+    }
+    div.halfCrossSize {
+      height: 8px;
+    }
+    div.shrunkMainSize {
+      width: 18px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <div class="flexbox">
+    <div class="item fullCrossSize" style="float: left"></div>
+    <div class="item fullCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize" style="float: left"></div>
+    <div class="item fullCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize" style="float: left"></div>
+    <div class="item fullCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize" style="float: left"></div>
+    <div class="item fullCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize" style="float: left"></div>
+    <div class="item fullCrossSize" style="float: left"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-2a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-2a.html
new file mode 100644
index 00000000000..6361c60ec16
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-2a.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing page-break-before in horizontal single-line flex containers (should have no effect)</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#algo-line-break">
+  <link rel="match" href="flexbox-flex-wrap-horiz-3-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      border: 1px dashed black;
+      width: 60px;
+      height: 20px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      width: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- page-break-before specified on first (and only) item, at a point where
+       we're already "breaking" (the beginning): -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-before specified on second item, at a point where breaking
+       would otherwise be unnecessary: -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-before specified on third item, at a point where breaking
+       is already necessary: -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-2b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-2b.html
new file mode 100644
index 00000000000..8d17d931707
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-2b.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing page-break-after in horizontal single-line flex containers (should have no effect)</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#algo-line-break">
+  <link rel="match" href="flexbox-flex-wrap-horiz-3-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      border: 1px dashed black;
+      width: 60px;
+      height: 20px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      width: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- page-break-after specified on first (and only) item, at a point where
+       we're already "breaking" (the end): -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: avoid"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-after specified on first item, at a point where breaking
+       would otherwise be unnecessary: -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: auto"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: avoid"></div>
+    <div class="item"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: always"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: left"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: right"></div>
+    <div class="item"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-after specified on second item, at a point where breaking
+       is already necessary: -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: auto"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: avoid"></div>
+    <div class="item"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: always"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: left"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: right"></div>
+    <div class="item"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-1-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-1-ref.html
new file mode 100644
index 00000000000..a9a286770bc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-1-ref.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      border: 1px dashed black;
+      width: 20px;
+      height: 60px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      height: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+    div.fullCrossSize {
+      width: 18px;
+    }
+    div.halfCrossSize {
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-1a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-1a.html
new file mode 100644
index 00000000000..2e6a269a53a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-1a.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing page-break-before in vertical multi-line flex containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#algo-line-break">
+  <link rel="match" href="flexbox-flex-wrap-horiz-3-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      border: 1px dashed black;
+      width: 20px;
+      height: 60px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      height: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- page-break-before specified on first (and only) item, at a point where
+       we're already "breaking" (the beginning): -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-before specified on second item, at a point where breaking
+       would otherwise be unnecessary: -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-before specified on third item, at a point where breaking
+       is already necessary: -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-1b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-1b.html
new file mode 100644
index 00000000000..f9f1eff5956
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-1b.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing page-break-after in vertical multi-line flex containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#algo-line-break">
+  <link rel="match" href="flexbox-flex-wrap-horiz-3-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      border: 1px dashed black;
+      width: 20px;
+      height: 60px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      height: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- page-break-after specified on first (and only) item, at a point where
+       we're already "breaking" (the end): -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: avoid"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-after specified on first item, at a point where breaking
+       would otherwise be unnecessary: -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: auto"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: avoid"></div>
+    <div class="item"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: always"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: left"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: right"></div>
+    <div class="item"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-after specified on second item, at a point where breaking
+       is already necessary: -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: auto"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: avoid"></div>
+    <div class="item"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: always"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: left"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: right"></div>
+    <div class="item"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-2-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-2-ref.html
new file mode 100644
index 00000000000..eeb8a4ea72d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-2-ref.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      border: 1px dashed black;
+      width: 20px;
+      height: 60px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      height: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+    div.fullCrossSize {
+      width: 18px;
+    }
+    div.halfCrossSize {
+      width: 8px;
+    }
+    div.shrunkMainSize {
+      height: 18px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-2a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-2a.html
new file mode 100644
index 00000000000..b5f21e3ec60
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-2a.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing page-break-before in vertical single-line flex containers (should have no effect)</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#algo-line-break">
+  <link rel="match" href="flexbox-flex-wrap-horiz-3-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-direction: column;
+      border: 1px dashed black;
+      width: 20px;
+      height: 60px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      height: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- page-break-before specified on first (and only) item, at a point where
+       we're already "breaking" (the beginning): -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-before specified on second item, at a point where breaking
+       would otherwise be unnecessary: -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-before specified on third item, at a point where breaking
+       is already necessary: -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-2b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-2b.html
new file mode 100644
index 00000000000..00e9da0bbdc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-2b.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing page-break-after in vertical single-line flex containers (should have no effect)</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#algo-line-break">
+  <link rel="match" href="flexbox-flex-wrap-horiz-3-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-direction: column;
+      border: 1px dashed black;
+      width: 20px;
+      height: 60px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      height: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- page-break-after specified on first (and only) item, at a point where
+       we're already "breaking" (the end): -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: avoid"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-after specified on first item, at a point where breaking
+       would otherwise be unnecessary: -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: auto"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: avoid"></div>
+    <div class="item"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: always"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: left"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: right"></div>
+    <div class="item"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-after specified on second item, at a point where breaking
+       is already necessary: -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: auto"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: avoid"></div>
+    <div class="item"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: always"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: left"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: right"></div>
+    <div class="item"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-1-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-1-ref.html
new file mode 100644
index 00000000000..bb76cafff14
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-1-ref.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      border: 1px dashed black;
+      width: 100px;
+      height: 12px;
+      margin-bottom: 2px;
+    }
+    div.halfMainSize {
+      width: 48px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+    div.hugeMainSize {
+      width: 148px;
+      border: 1px solid purple;
+      background: fuchsia;
+    }
+    div.fullCrossSize {
+      height: 10px;
+    }
+    div.halfCrossSize {
+      height: 4px;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Single small flex item -->
+  <div class="flexbox">
+    <div class="halfMainSize fullCrossSize"></div>
+  </div>
+
+  <!-- Single small flex item with 'margin-left' set to push it to protrude
+       from the far edge of the container (and to shrink as a result) -->
+  <div class="flexbox">
+    <div class="halfMainSize fullCrossSize"
+         style="margin-left: 80px; width: 18px"></div>
+  </div>
+
+  <!-- Single small inflexible flex item with 'margin-left' set to push it to
+       protrude from the far edge of the container -->
+  <div class="flexbox">
+    <div class="halfMainSize fullCrossSize"
+         style="margin-left: 80px"></div>
+  </div>
+
+  <!-- Two flex items, exactly large enough to fit in line (no wrapping): -->
+  <div class="flexbox">
+    <div class="halfMainSize fullCrossSize" style="float: left"></div>
+    <div class="halfMainSize fullCrossSize" style="float: left"></div>
+  </div>
+
+  <!-- and now with some margin on first item, to force second item to wrap: -->
+  <div class="flexbox">
+    <div class="halfMainSize halfCrossSize"></div>
+    <div class="halfMainSize halfCrossSize"></div>
+  </div>
+
+  <!-- and now with some margin on second item, again forcing it to wrap: -->
+  <div class="flexbox">
+    <div class="halfMainSize halfCrossSize"></div>
+    <div class="halfMainSize halfCrossSize"></div>
+  </div>
+
+  <!-- Single large flex item: overflows (but does not wrap) and is shrunk
+       to fit container's main-size -->
+  <div class="flexbox">
+    <div class="hugeMainSize fullCrossSize" style="width: 98px"></div>
+  </div>
+
+  <!-- Single large flex item: overflows (but does not wrap) -->
+  <div class="flexbox">
+    <div class="hugeMainSize fullCrossSize"></div>
+  </div>
+
+  <!-- Small flex item, followed by large flex item (which wraps to
+       its own line and then shrink to container's main-size) -->
+  <div class="flexbox">
+    <div class="halfMainSize halfCrossSize"></div>
+    <div class="hugeMainSize halfCrossSize" style="width: 98px"></div>
+  </div>
+
+  <!-- Small flex item, followed by large inflexible flex item (which wraps to
+       its own line and then shrink to container's main-size) -->
+  <div class="flexbox">
+    <div class="halfMainSize halfCrossSize"></div>
+    <div class="hugeMainSize halfCrossSize"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-1.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-1.html
new file mode 100644
index 00000000000..a7eed85366f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-1.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing flex-wrap in horizontal flex containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#flex-wrap-property">
+  <link rel="match" href="flexbox-flex-wrap-horiz-1-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-wrap: wrap;
+      border: 1px dashed black;
+      width: 100px;
+      height: 12px;
+      margin-bottom: 2px;
+    }
+    div.halfMainSize {
+      width: 48px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+    div.hugeMainSize {
+      width: 148px;
+      border: 1px solid purple;
+      background: fuchsia;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Single small flex item -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+  </div>
+
+  <!-- Single small flex item with 'margin-left' set to push it to protrude
+       from the far edge of the container (and to shrink as a result) -->
+  <div class="flexbox">
+    <div class="halfMainSize" style="margin-left: 80px"></div>
+  </div>
+
+  <!-- Single small inflexible flex item with 'margin-left' set to push it to
+       protrude from the far edge of the container -->
+  <div class="flexbox">
+    <div class="halfMainSize" style="margin-left: 80px; flex: none"></div>
+  </div>
+
+  <!-- Two flex items, exactly large enough to fit in line (no wrapping): -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+    <div class="halfMainSize"></div>
+  </div>
+
+  <!-- and now with some margin on first item, to force second item to wrap: -->
+  <div class="flexbox">
+    <div class="halfMainSize" style="margin-right: 1px"></div>
+    <div class="halfMainSize"></div>
+  </div>
+
+  <!-- and now with some margin on second item, again forcing it to wrap: -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+    <div class="halfMainSize" style="margin-right: 1px"></div>
+  </div>
+
+  <!-- Single large flex item: overflows (but does not wrap) and is shrunk
+       to fit container's main-size -->
+  <div class="flexbox">
+    <div class="hugeMainSize"></div>
+  </div>
+
+  <!-- Single large flex item: overflows (but does not wrap) -->
+  <div class="flexbox">
+    <div class="hugeMainSize" style="flex: none"></div>
+  </div>
+
+  <!-- Small flex item, followed by large flex item (which wraps to
+       its own line and then shrink to container's main-size) -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+    <div class="hugeMainSize"></div>
+  </div>
+
+  <!-- Small flex item, followed by large inflexible flex item (which wraps to
+       its own line and then shrink to container's main-size) -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+    <div class="hugeMainSize" style="flex: none"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-2-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-2-ref.html
new file mode 100644
index 00000000000..88c3beb19e9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-2-ref.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      border: 1px dashed black;
+      min-width: 100px;
+      height: 12px;
+      float: left;
+      clear: both;
+      margin-bottom: 2px;
+    }
+    div.smallItem {
+      width: 30px;
+      border: 1px solid blue;
+      background: lightblue;
+      float: left;
+    }
+    div.fullCrossSize {
+      height: 10px;
+    }
+    div.halfCrossSize {
+      height: 4px;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- No flex items -->
+  <div class="flexbox">
+  </div>
+
+  <!-- Single small flex item -->
+  <div class="flexbox">
+    <div class="smallItem fullCrossSize"></div>
+  </div>
+
+  <!-- Multiple flex items, larger than flex container's min-size: -->
+  <div class="flexbox">
+    <div class="smallItem fullCrossSize"></div>
+    <div class="smallItem fullCrossSize"></div>
+    <div class="smallItem fullCrossSize"></div>
+    <div class="smallItem fullCrossSize"></div>
+    <div class="smallItem fullCrossSize"></div>
+  </div>
+
+  <!--- ...and now with flex container constrained by both min and max-size -->
+  <div class="flexbox" style="max-width: 120px">
+    <div class="smallItem halfCrossSize"></div>
+    <div class="smallItem halfCrossSize"></div>
+    <div class="smallItem halfCrossSize"></div>
+    <div class="smallItem halfCrossSize"></div>
+    <div class="smallItem halfCrossSize"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-2.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-2.html
new file mode 100644
index 00000000000..6d4bb8bef28
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-2.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Ensure that min-width is honored for horizontal multi-line flex containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#flex-wrap-property">
+  <link rel="match" href="flexbox-flex-wrap-horiz-2-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-wrap: wrap;
+      border: 1px dashed black;
+      min-width: 100px;
+      height: 12px;
+      float: left;
+      clear: both;
+      margin-bottom: 2px;
+    }
+    div.smallItem {
+      width: 30px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- No flex items -->
+  <div class="flexbox">
+  </div>
+
+  <!-- Single small flex item -->
+  <div class="flexbox">
+    <div class="smallItem"></div>
+  </div>
+
+  <!-- Multiple flex items, larger than flex container's min-size: -->
+  <div class="flexbox">
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+  </div>
+
+  <!--- ...and now with flex container constrained by both min and max-size -->
+  <div class="flexbox" style="max-width: 120px">
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-1-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-1-ref.html
new file mode 100644
index 00000000000..67f2c75da28
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-1-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      border: 1px dashed black;
+      width: 12px;
+      height: 100px;
+      margin-right: 2px;
+      float: left;
+    }
+    div.halfMainSize {
+      height: 48px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+    div.hugeMainSize {
+      height: 148px;
+      border: 1px solid purple;
+      background: fuchsia;
+    }
+    div.fullCrossSize {
+      width: 10px;
+    }
+    div.halfCrossSize {
+      width: 4px;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Single small flex item -->
+  <div class="flexbox">
+    <div class="halfMainSize fullCrossSize"></div>
+  </div>
+
+  <!-- Single small flex item with 'margin-left' set to push it to protrude
+       from the far edge of the container (and to shrink as a result) -->
+  <div class="flexbox">
+    <div class="halfMainSize fullCrossSize"
+         style="margin-top: 80px; height: 18px"></div>
+  </div>
+
+  <!-- Single small inflexible flex item with 'margin-left' set to push it to
+       protrude from the far edge of the container -->
+  <div class="flexbox">
+    <div class="halfMainSize fullCrossSize"
+         style="margin-top: 80px"></div>
+  </div>
+
+  <!-- Two flex items, exactly large enough to fit in line (no wrapping): -->
+  <div class="flexbox">
+    <div class="halfMainSize fullCrossSize"></div>
+    <div class="halfMainSize fullCrossSize"></div>
+  </div>
+
+  <!-- and now with some margin on first item, to force second item to wrap: -->
+  <div class="flexbox">
+    <div class="halfMainSize halfCrossSize" style="float: left"></div>
+    <div class="halfMainSize halfCrossSize" style="float: left"></div>
+  </div>
+
+  <!-- and now with some margin on second item, again forcing it to wrap: -->
+  <div class="flexbox">
+    <div class="halfMainSize halfCrossSize" style="float: left"></div>
+    <div class="halfMainSize halfCrossSize" style="float: left"></div>
+  </div>
+
+  <!-- Single large flex item: overflows (but does not wrap) and is shrunk
+       to fit container's main-size -->
+  <div class="flexbox">
+    <div class="hugeMainSize fullCrossSize" style="height: 98px"></div>
+  </div>
+
+  <!-- Single large flex item: overflows (but does not wrap) -->
+  <div class="flexbox">
+    <div class="hugeMainSize fullCrossSize"></div>
+  </div>
+
+  <!-- Small flex item, followed by large flex item (which wraps to
+       its own line and then shrink to container's main-size) -->
+  <div class="flexbox">
+    <div class="halfMainSize halfCrossSize" style="float: left"></div>
+    <div class="hugeMainSize halfCrossSize" style="float: left; height: 98px"></div>
+  </div>
+
+  <!-- Small flex item, followed by large inflexible flex item (which wraps to
+       its own line and then shrink to container's main-size) -->
+  <div class="flexbox">
+    <div class="halfMainSize halfCrossSize" style="float: left"></div>
+    <div class="hugeMainSize halfCrossSize" style="float: left"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-1.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-1.html
new file mode 100644
index 00000000000..b33e3ba04d7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-1.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing flex-wrap in vertical flex containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#flex-wrap-property">
+  <link rel="match" href="flexbox-flex-wrap-vert-1-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      border: 1px dashed black;
+      width: 12px;
+      height: 100px;
+      margin-right: 2px;
+      float: left;
+    }
+    div.halfMainSize {
+      height: 48px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+    div.hugeMainSize {
+      height: 148px;
+      border: 1px solid purple;
+      background: fuchsia;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Single small flex item -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+  </div>
+
+  <!-- Single small flex item with 'margin-top' set to push it to protrude
+       from the far edge of the container (and to shrink as a result) -->
+  <div class="flexbox">
+    <div class="halfMainSize" style="margin-top: 80px"></div>
+  </div>
+
+  <!-- Single small inflexible flex item with 'margin-top' set to push it to
+       protrude from the far edge of the container -->
+  <div class="flexbox">
+    <div class="halfMainSize" style="margin-top: 80px; flex: none"></div>
+  </div>
+
+  <!-- Two flex items, exactly large enough to fit in line (no wrapping): -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+    <div class="halfMainSize"></div>
+  </div>
+
+  <!-- and now with some margin on first item, to force second item to wrap: -->
+  <div class="flexbox">
+    <div class="halfMainSize" style="margin-bottom: 1px"></div>
+    <div class="halfMainSize"></div>
+  </div>
+
+  <!-- and now with some margin on second item, again forcing it to wrap: -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+    <div class="halfMainSize" style="margin-bottom: 1px"></div>
+  </div>
+
+  <!-- Single large flex item: overflows (but does not wrap) and is shrunk
+       to fit container's main-size -->
+  <div class="flexbox">
+    <div class="hugeMainSize"></div>
+  </div>
+
+  <!-- Single large flex item: overflows (but does not wrap) -->
+  <div class="flexbox">
+    <div class="hugeMainSize" style="flex: none"></div>
+  </div>
+
+  <!-- Small flex item, followed by large flex item (which wraps to
+       its own line and then shrink to container's main-size) -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+    <div class="hugeMainSize"></div>
+  </div>
+
+  <!-- Small flex item, followed by large inflexible flex item (which wraps to
+       its own line and then shrink to container's main-size) -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+    <div class="hugeMainSize" style="flex: none"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-2-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-2-ref.html
new file mode 100644
index 00000000000..f9a4553ccbe
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-2-ref.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      border: 1px dashed black;
+      width: 12px;
+      min-height: 100px;
+      margin-right: 2px;
+      float: left;
+    }
+    div.smallItem {
+      height: 30px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+    div.halfCrossSize {
+      width: 4px;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- No flex items -->
+  <div class="flexbox">
+  </div>
+
+  <!-- Single small flex item -->
+  <div class="flexbox">
+    <div class="smallItem"></div>
+  </div>
+
+  <!-- Multiple flex items, larger than flex container's min-size: -->
+  <div class="flexbox">
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+  </div>
+
+  <!--- ...and now with flex container constrained by both min and max-size -->
+  <div class="flexbox" style="max-height: 120px">
+    <div class="smallItem halfCrossSize" style="float: left"></div>
+    <div class="smallItem halfCrossSize" style="float: left"></div>
+    <div class="smallItem halfCrossSize" style="float: left"></div>
+    <div class="smallItem halfCrossSize" style="float: left"></div>
+    <div class="smallItem halfCrossSize" style="float: left"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-2.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-2.html
new file mode 100644
index 00000000000..0cfc2711a1e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-2.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Ensure that min-height is honored for vertical multi-line flex containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#flex-wrap-property">
+  <link rel="match" href="flexbox-flex-wrap-vert-2-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      border: 1px dashed black;
+      width: 12px;
+      min-height: 100px;
+      margin-right: 2px;
+      float: left;
+    }
+    div.smallItem {
+      height: 30px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- No flex items -->
+  <div class="flexbox">
+  </div>
+
+  <!-- Single small flex item -->
+  <div class="flexbox">
+    <div class="smallItem"></div>
+  </div>
+
+  <!-- Multiple flex items, larger than flex container's min-size: -->
+  <div class="flexbox">
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+  </div>
+
+  <!--- ...and now with flex container constrained by both min and max-size -->
+  <div class="flexbox" style="max-height: 120px">
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/reftest.list b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
index f39632d3802..c12252312a4 100644
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -1,3 +1,9 @@
+# Tests for alignment of flex lines (align-content property)
+== flexbox-align-content-horiz-1a.xhtml flexbox-align-content-horiz-1-ref.xhtml
+== flexbox-align-content-horiz-1b.xhtml flexbox-align-content-horiz-1-ref.xhtml
+== flexbox-align-content-vert-1a.xhtml  flexbox-align-content-vert-1-ref.xhtml
+== flexbox-align-content-vert-1b.xhtml  flexbox-align-content-vert-1-ref.xhtml
+
 # Tests for cross-axis alignment (align-self / align-items properties)
 == flexbox-align-self-baseline-horiz-1.xhtml  flexbox-align-self-baseline-horiz-1-ref.xhtml
 
@@ -25,6 +31,8 @@ fuzzy-if(Android,158,32) == flexbox-align-self-vert-rtl-1.xhtml  flexbox-align-s
 == flexbox-baseline-empty-1b.html flexbox-baseline-empty-1-ref.html
 == flexbox-baseline-multi-item-horiz-1.html flexbox-baseline-multi-item-horiz-1-ref.html
 == flexbox-baseline-multi-item-vert-1.html flexbox-baseline-multi-item-vert-1-ref.html
+== flexbox-baseline-multi-line-horiz-1.html flexbox-baseline-multi-line-horiz-1-ref.html
+== flexbox-baseline-multi-line-horiz-2.html flexbox-baseline-multi-line-horiz-2-ref.html
 == flexbox-baseline-single-item-1a.html flexbox-baseline-single-item-1-ref.html
 == flexbox-baseline-single-item-1b.html flexbox-baseline-single-item-1-ref.html
 
@@ -46,6 +54,22 @@ fuzzy-if(Android,158,32) == flexbox-align-self-vert-rtl-1.xhtml  flexbox-align-s
 == flexbox-basic-video-horiz-1.xhtml    flexbox-basic-video-horiz-1-ref.xhtml
 == flexbox-basic-video-vert-1.xhtml     flexbox-basic-video-vert-1-ref.xhtml
 
+# Tests for "page-break-before" / "page-break-after" on a flex item
+== flexbox-break-request-horiz-1a.html flexbox-break-request-horiz-1-ref.html
+== flexbox-break-request-horiz-1b.html flexbox-break-request-horiz-1-ref.html
+== flexbox-break-request-horiz-2a.html flexbox-break-request-horiz-2-ref.html
+== flexbox-break-request-horiz-2b.html flexbox-break-request-horiz-2-ref.html
+== flexbox-break-request-vert-1a.html  flexbox-break-request-vert-1-ref.html
+== flexbox-break-request-vert-1b.html  flexbox-break-request-vert-1-ref.html
+== flexbox-break-request-vert-2a.html  flexbox-break-request-vert-2-ref.html
+== flexbox-break-request-vert-2b.html  flexbox-break-request-vert-2-ref.html
+
+# Tests for flex-wrap property
+== flexbox-flex-wrap-horiz-1.html flexbox-flex-wrap-horiz-1-ref.html
+== flexbox-flex-wrap-horiz-2.html flexbox-flex-wrap-horiz-2-ref.html
+== flexbox-flex-wrap-vert-1.html  flexbox-flex-wrap-vert-1-ref.html
+== flexbox-flex-wrap-vert-2.html  flexbox-flex-wrap-vert-2-ref.html
+
 # Tests for flex items as (pseudo) stacking contexts
 == flexbox-items-as-stacking-contexts-1.xhtml flexbox-items-as-stacking-contexts-1-ref.xhtml
 == flexbox-items-as-stacking-contexts-2.html flexbox-items-as-stacking-contexts-2-ref.html