From a3cb31110c9a909166d48602a33995e6b086b915 Mon Sep 17 00:00:00 2001
From: Daniel Holbert <dholbert@cs.stanford.edu>
Date: Sat, 29 Sep 2012 23:42:29 -0700
Subject: [PATCH] Bug 666041: Reftests for css3-flexbox. (tests-only)

--HG--
rename : layout/reftests/bugs/solidblue.png => layout/reftests/flexbox/solidblue.png
---
 layout/reftests/flexbox/ahem.css              |   4 +
 ...xbox-align-self-baseline-horiz-1-ref.xhtml |  67 ++++++++
 .../flexbox-align-self-baseline-horiz-1.xhtml |  63 +++++++
 ...xbox-align-self-baseline-horiz-2-ref.xhtml |  52 ++++++
 .../flexbox-align-self-baseline-horiz-2.xhtml |  56 ++++++
 ...xbox-align-self-baseline-horiz-3-ref.xhtml |  58 +++++++
 .../flexbox-align-self-baseline-horiz-3.xhtml |  54 ++++++
 .../flexbox-align-self-horiz-1-ref.xhtml      |  89 ++++++++++
 .../flexbox/flexbox-align-self-horiz-1.xhtml  |  94 ++++++++++
 .../flexbox-align-self-horiz-2-ref.xhtml      |  81 +++++++++
 .../flexbox/flexbox-align-self-horiz-2.xhtml  |  75 ++++++++
 .../flexbox-align-self-horiz-3-ref.xhtml      |  91 ++++++++++
 .../flexbox/flexbox-align-self-horiz-3.xhtml  |  89 ++++++++++
 .../flexbox-align-self-horiz-4-ref.xhtml      |  85 +++++++++
 .../flexbox/flexbox-align-self-horiz-4.xhtml  |  80 +++++++++
 .../flexbox-align-self-horiz-5-ref.xhtml      |  96 +++++++++++
 .../flexbox/flexbox-align-self-horiz-5.xhtml  | 100 +++++++++++
 .../flexbox-align-self-vert-1-ref.xhtml       |  94 ++++++++++
 .../flexbox/flexbox-align-self-vert-1.xhtml   |  88 ++++++++++
 .../flexbox-align-self-vert-2-ref.xhtml       |  92 ++++++++++
 .../flexbox/flexbox-align-self-vert-2.xhtml   |  73 ++++++++
 .../flexbox-align-self-vert-3-ref.xhtml       |  76 ++++++++
 .../flexbox/flexbox-align-self-vert-3.xhtml   |  64 +++++++
 .../flexbox-align-self-vert-4-ref.xhtml       | 102 +++++++++++
 .../flexbox/flexbox-align-self-vert-4.xhtml   |  75 ++++++++
 .../flexbox-align-self-vert-rtl-1-ref.xhtml   |  97 +++++++++++
 .../flexbox-align-self-vert-rtl-1.xhtml       |  91 ++++++++++
 .../flexbox-align-self-vert-rtl-2-ref.xhtml   |  95 ++++++++++
 .../flexbox-align-self-vert-rtl-2.xhtml       |  76 ++++++++
 .../flexbox-align-self-vert-rtl-3-ref.xhtml   |  78 +++++++++
 .../flexbox-align-self-vert-rtl-3.xhtml       |  66 +++++++
 .../flexbox-align-self-vert-rtl-4-ref.xhtml   | 103 +++++++++++
 .../flexbox-align-self-vert-rtl-4.xhtml       |  84 +++++++++
 .../flexbox-basic-block-horiz-1-ref.xhtml     |  63 +++++++
 .../flexbox/flexbox-basic-block-horiz-1.xhtml |  61 +++++++
 .../flexbox-basic-block-vert-1-ref.xhtml      |  58 +++++++
 .../flexbox/flexbox-basic-block-vert-1.xhtml  |  62 +++++++
 .../flexbox-basic-canvas-horiz-1-ref.xhtml    |  58 +++++++
 .../flexbox-basic-canvas-horiz-1.xhtml        |  97 +++++++++++
 .../flexbox-basic-canvas-horiz-2-ref.xhtml    |  27 +++
 .../flexbox-basic-canvas-horiz-2.xhtml        |  31 ++++
 .../flexbox-basic-canvas-vert-1-ref.xhtml     |  62 +++++++
 .../flexbox/flexbox-basic-canvas-vert-1.xhtml |  99 +++++++++++
 .../flexbox-basic-canvas-vert-2-ref.xhtml     |  28 +++
 .../flexbox/flexbox-basic-canvas-vert-2.xhtml |  32 ++++
 .../flexbox-basic-fieldset-horiz-1-ref.xhtml  |  63 +++++++
 .../flexbox-basic-fieldset-horiz-1.xhtml      | 101 +++++++++++
 .../flexbox-basic-fieldset-horiz-2-ref.xhtml  |  27 +++
 .../flexbox-basic-fieldset-horiz-2.xhtml      |  31 ++++
 .../flexbox-basic-fieldset-vert-1-ref.xhtml   |  64 +++++++
 .../flexbox-basic-fieldset-vert-1.xhtml       | 103 +++++++++++
 .../flexbox-basic-fieldset-vert-2-ref.xhtml   |  28 +++
 .../flexbox-basic-fieldset-vert-2.xhtml       |  33 ++++
 .../flexbox-basic-iframe-horiz-1-ref.xhtml    |  58 +++++++
 .../flexbox-basic-iframe-horiz-1.xhtml        |  98 +++++++++++
 .../flexbox-basic-iframe-horiz-2-ref.xhtml    |  27 +++
 .../flexbox-basic-iframe-horiz-2.xhtml        |  31 ++++
 .../flexbox-basic-iframe-vert-1-ref.xhtml     |  62 +++++++
 .../flexbox/flexbox-basic-iframe-vert-1.xhtml | 100 +++++++++++
 .../flexbox-basic-iframe-vert-2-ref.xhtml     |  28 +++
 .../flexbox/flexbox-basic-iframe-vert-2.xhtml |  32 ++++
 .../flexbox-basic-img-horiz-1-ref.xhtml       |  58 +++++++
 .../flexbox/flexbox-basic-img-horiz-1.xhtml   |  99 +++++++++++
 .../flexbox-basic-img-horiz-2-ref.xhtml       |  27 +++
 .../flexbox/flexbox-basic-img-horiz-2.xhtml   |  31 ++++
 .../flexbox-basic-img-vert-1-ref.xhtml        |  62 +++++++
 .../flexbox/flexbox-basic-img-vert-1.xhtml    | 101 +++++++++++
 .../flexbox-basic-img-vert-2-ref.xhtml        |  28 +++
 .../flexbox/flexbox-basic-img-vert-2.xhtml    |  32 ++++
 .../flexbox-basic-textarea-horiz-1-ref.xhtml  |  61 +++++++
 .../flexbox-basic-textarea-horiz-1.xhtml      | 104 +++++++++++
 .../flexbox-basic-textarea-horiz-2-ref.xhtml  |  27 +++
 .../flexbox-basic-textarea-horiz-2.xhtml      |  31 ++++
 .../flexbox-basic-textarea-vert-1-ref.xhtml   |  66 +++++++
 .../flexbox-basic-textarea-vert-1.xhtml       | 107 ++++++++++++
 .../flexbox-basic-textarea-vert-2-ref.xhtml   |  28 +++
 .../flexbox-basic-textarea-vert-2.xhtml       |  33 ++++
 .../flexbox-basic-video-horiz-1-ref.xhtml     |  58 +++++++
 .../flexbox/flexbox-basic-video-horiz-1.xhtml |  97 +++++++++++
 .../flexbox-basic-video-horiz-2-ref.xhtml     |  27 +++
 .../flexbox/flexbox-basic-video-horiz-2.xhtml |  31 ++++
 .../flexbox-basic-video-vert-1-ref.xhtml      |  62 +++++++
 .../flexbox/flexbox-basic-video-vert-1.xhtml  |  99 +++++++++++
 .../flexbox-basic-video-vert-2-ref.xhtml      |  28 +++
 .../flexbox/flexbox-basic-video-vert-2.xhtml  |  32 ++++
 .../flexbox-dyn-insertAroundDiv-1-ref.xhtml   |  39 +++++
 .../flexbox-dyn-insertAroundDiv-1.xhtml       |  87 ++++++++++
 .../flexbox-dyn-insertAroundDiv-2-ref.xhtml   |  41 +++++
 .../flexbox-dyn-insertAroundDiv-2.xhtml       | 104 +++++++++++
 .../flexbox-dyn-insertAroundDiv-3-ref.xhtml   |  40 +++++
 .../flexbox-dyn-insertAroundDiv-3.xhtml       | 104 +++++++++++
 .../flexbox-dyn-insertAroundSpan-1.xhtml      |  87 ++++++++++
 .../flexbox-dyn-insertAroundSpan-2.xhtml      | 107 ++++++++++++
 .../flexbox-dyn-insertAroundSpan-3.xhtml      | 107 ++++++++++++
 .../flexbox-dyn-insertAroundText-1-ref.xhtml  |  39 +++++
 .../flexbox-dyn-insertAroundText-1.xhtml      |  87 ++++++++++
 .../flexbox-dyn-insertAroundText-2-ref.xhtml  |  44 +++++
 .../flexbox-dyn-insertAroundText-2.xhtml      | 107 ++++++++++++
 .../flexbox-dyn-insertAroundText-3-ref.xhtml  |  43 +++++
 .../flexbox-dyn-insertAroundText-3.xhtml      | 107 ++++++++++++
 .../flexbox-dyn-insertEmptySpan-1-ref.xhtml   |  43 +++++
 .../flexbox-dyn-insertEmptySpan-1.xhtml       | 103 +++++++++++
 .../flexbox/flexbox-empty-1-ref.xhtml         |  38 ++++
 .../reftests/flexbox/flexbox-empty-1a.xhtml   |  39 +++++
 .../reftests/flexbox/flexbox-empty-1b.xhtml   |  45 +++++
 .../flexbox/flexbox-float-1-ref.xhtml         |  39 +++++
 .../reftests/flexbox/flexbox-float-1a.xhtml   |  47 +++++
 .../reftests/flexbox/flexbox-float-1b.xhtml   |  43 +++++
 .../reftests/flexbox/flexbox-float-1c.xhtml   |  75 ++++++++
 .../reftests/flexbox/flexbox-float-1d.xhtml   |  75 ++++++++
 .../flexbox/flexbox-float-2-ref.xhtml         |  39 +++++
 .../reftests/flexbox/flexbox-float-2a.xhtml   |  42 +++++
 .../reftests/flexbox/flexbox-float-2b.xhtml   |  46 +++++
 .../flexbox-inlinecontent-horiz-1-ref.xhtml   |  45 +++++
 .../flexbox-inlinecontent-horiz-1a.xhtml      |  39 +++++
 .../flexbox-inlinecontent-horiz-1b.xhtml      |  55 ++++++
 .../flexbox-inlinecontent-horiz-2-ref.xhtml   |  34 ++++
 .../flexbox-inlinecontent-horiz-2.xhtml       |  46 +++++
 .../flexbox-inlinecontent-horiz-3-ref.xhtml   |  22 +++
 .../flexbox-inlinecontent-horiz-3a.xhtml      |  24 +++
 .../flexbox-inlinecontent-horiz-3b.xhtml      |  39 +++++
 .../flexbox-inlinecontent-horiz-3c.xhtml      |  39 +++++
 .../flexbox-inlinecontent-horiz-4-ref.xhtml   |  21 +++
 .../flexbox-inlinecontent-horiz-4.xhtml       |  27 +++
 .../flexbox-inlinecontent-horiz-5-ref.xhtml   |  25 +++
 .../flexbox-inlinecontent-horiz-5.xhtml       |  36 ++++
 .../flexbox-inlinecontent-horiz-6-ref.xhtml   |  39 +++++
 .../flexbox-inlinecontent-horiz-6.xhtml       |  40 +++++
 ...flexbox-intrinsic-sizing-horiz-1-ref.xhtml |  91 ++++++++++
 .../flexbox-intrinsic-sizing-horiz-1a.xhtml   | 102 +++++++++++
 .../flexbox-intrinsic-sizing-horiz-1b.xhtml   | 102 +++++++++++
 ...flexbox-intrinsic-sizing-horiz-2-ref.xhtml |  45 +++++
 .../flexbox-intrinsic-sizing-horiz-2a.xhtml   |  38 ++++
 .../flexbox-intrinsic-sizing-horiz-2b.xhtml   |  44 +++++
 .../flexbox/flexbox-invalidation-1-ref.html   |  36 ++++
 .../flexbox/flexbox-invalidation-1.html       |  47 +++++
 .../flexbox-justify-content-horiz-1-ref.xhtml | 107 ++++++++++++
 .../flexbox-justify-content-horiz-1.xhtml     | 102 +++++++++++
 .../flexbox-justify-content-horiz-2-ref.xhtml | 121 +++++++++++++
 .../flexbox-justify-content-horiz-2.xhtml     | 115 +++++++++++++
 .../flexbox-justify-content-horiz-3-ref.xhtml | 103 +++++++++++
 .../flexbox-justify-content-horiz-3.xhtml     | 110 ++++++++++++
 .../flexbox-justify-content-horiz-4-ref.xhtml | 115 +++++++++++++
 .../flexbox-justify-content-horiz-4.xhtml     | 121 +++++++++++++
 .../flexbox-justify-content-horiz-5-ref.xhtml | 128 ++++++++++++++
 .../flexbox-justify-content-horiz-5.xhtml     | 100 +++++++++++
 .../flexbox-justify-content-vert-1-ref.xhtml  | 105 ++++++++++++
 .../flexbox-justify-content-vert-1.xhtml      | 104 +++++++++++
 .../flexbox-justify-content-vert-2-ref.xhtml  | 118 +++++++++++++
 .../flexbox-justify-content-vert-2.xhtml      | 117 +++++++++++++
 .../flexbox-justify-content-vert-3-ref.xhtml  | 101 +++++++++++
 .../flexbox-justify-content-vert-3.xhtml      | 113 ++++++++++++
 .../flexbox-justify-content-vert-4-ref.xhtml  | 112 ++++++++++++
 .../flexbox-justify-content-vert-4.xhtml      | 124 ++++++++++++++
 .../flexbox-justify-content-vert-5-ref.xhtml  | 100 +++++++++++
 .../flexbox-justify-content-vert-5.xhtml      | 107 ++++++++++++
 .../flexbox-margin-auto-horiz-1-ref.xhtml     |  85 +++++++++
 .../flexbox/flexbox-margin-auto-horiz-1.xhtml |  79 +++++++++
 .../flexbox-margin-auto-horiz-2-ref.xhtml     |  59 +++++++
 .../flexbox/flexbox-margin-auto-horiz-2.xhtml |  64 +++++++
 .../flexbox/flexbox-mbp-horiz-1-ref.xhtml     |  69 ++++++++
 .../flexbox-mbp-horiz-1-reverse-ref.xhtml     |  72 ++++++++
 .../flexbox/flexbox-mbp-horiz-1-reverse.xhtml |  68 ++++++++
 .../flexbox-mbp-horiz-1-rtl-reverse.xhtml     |  70 ++++++++
 .../flexbox/flexbox-mbp-horiz-1-rtl.xhtml     |  68 ++++++++
 .../flexbox/flexbox-mbp-horiz-1.xhtml         |  66 +++++++
 .../flexbox/flexbox-mbp-horiz-2-ref.xhtml     |  73 ++++++++
 .../flexbox/flexbox-mbp-horiz-2a.xhtml        |  70 ++++++++
 .../flexbox/flexbox-mbp-horiz-2b.xhtml        |  77 +++++++++
 .../flexbox/flexbox-mbp-horiz-3-ref.xhtml     |  79 +++++++++
 .../flexbox-mbp-horiz-3-reverse-ref.xhtml     |  79 +++++++++
 .../flexbox/flexbox-mbp-horiz-3-reverse.xhtml |  79 +++++++++
 .../flexbox/flexbox-mbp-horiz-3.xhtml         |  79 +++++++++
 .../flexbox/flexbox-minSize-horiz-1-ref.xhtml |  78 +++++++++
 .../flexbox/flexbox-minSize-horiz-1.xhtml     |  71 ++++++++
 .../flexbox/flexbox-minSize-vert-1-ref.xhtml  |  55 ++++++
 .../flexbox/flexbox-minSize-vert-1.xhtml      |  73 ++++++++
 .../flexbox-position-absolute-1-ref.xhtml     |  74 ++++++++
 .../flexbox/flexbox-position-absolute-1.xhtml |  70 ++++++++
 .../flexbox-position-absolute-2-ref.xhtml     |  73 ++++++++
 .../flexbox/flexbox-position-absolute-2.xhtml |  71 ++++++++
 .../flexbox-position-absolute-3-ref.xhtml     |  44 +++++
 .../flexbox/flexbox-position-absolute-3.xhtml |  46 +++++
 .../flexbox-position-absolute-4-ref.xhtml     |  50 ++++++
 .../flexbox/flexbox-position-absolute-4.xhtml |  52 ++++++
 .../flexbox-position-fixed-1-ref.xhtml        |  74 ++++++++
 .../flexbox/flexbox-position-fixed-1.xhtml    |  70 ++++++++
 .../flexbox-position-fixed-2-ref.xhtml        |  73 ++++++++
 .../flexbox/flexbox-position-fixed-2.xhtml    |  71 ++++++++
 .../flexbox-position-fixed-3-ref.xhtml        |  44 +++++
 .../flexbox/flexbox-position-fixed-3.xhtml    |  46 +++++
 .../flexbox-position-fixed-4-ref.xhtml        |  51 ++++++
 .../flexbox/flexbox-position-fixed-4.xhtml    |  52 ++++++
 .../flexbox-resizeviewport-1-helper.html      |  31 ++++
 .../flexbox-resizeviewport-1-ref.xhtml        |  22 +++
 .../flexbox/flexbox-resizeviewport-1.xhtml    |  40 +++++
 .../flexbox/flexbox-sizing-horiz-1-ref.xhtml  |  73 ++++++++
 .../flexbox/flexbox-sizing-horiz-1.xhtml      |  80 +++++++++
 .../flexbox/flexbox-sizing-vert-1-ref.xhtml   |  79 +++++++++
 .../flexbox/flexbox-sizing-vert-1.xhtml       |  94 ++++++++++
 .../flexbox/flexbox-table-fixup-1-ref.xhtml   |  59 +++++++
 .../flexbox/flexbox-table-fixup-1a.xhtml      |  62 +++++++
 .../flexbox/flexbox-table-fixup-1b.xhtml      |  70 ++++++++
 .../flexbox-whitespace-handling-1-ref.xhtml   |  50 ++++++
 .../flexbox-whitespace-handling-1a.xhtml      |  53 ++++++
 .../flexbox-whitespace-handling-1b.xhtml      |  42 +++++
 .../flexbox-whitespace-handling-2-ref.xhtml   |  50 ++++++
 .../flexbox-whitespace-handling-2.xhtml       |  50 ++++++
 .../flexbox-whitespace-handling-3-ref.xhtml   |  32 ++++
 .../flexbox-whitespace-handling-3.xhtml       |  36 ++++
 .../flexbox-widget-flex-items-1-ref.html      |  34 ++++
 .../flexbox/flexbox-widget-flex-items-1.html  |  46 +++++
 .../flexbox-widget-flex-items-2-ref.html      |  34 ++++
 .../flexbox/flexbox-widget-flex-items-2.html  |  42 +++++
 .../flexbox-widget-flex-items-3-ref.html      |  34 ++++
 .../flexbox/flexbox-widget-flex-items-3.html  |  43 +++++
 .../flexbox-widget-flex-items-4-ref.html      |  36 ++++
 .../flexbox/flexbox-widget-flex-items-4.html  |  42 +++++
 layout/reftests/flexbox/reftest.list          | 162 ++++++++++++++++++
 layout/reftests/flexbox/solidblue.png         | Bin 0 -> 135 bytes
 layout/reftests/reftest.list                  |   4 +
 221 files changed, 14431 insertions(+)
 create mode 100644 layout/reftests/flexbox/ahem.css
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-baseline-horiz-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-baseline-horiz-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-horiz-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-horiz-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-horiz-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-horiz-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-horiz-3-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-horiz-3.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-horiz-4-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-horiz-4.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-horiz-5-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-horiz-5.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-vert-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-vert-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-vert-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-vert-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-vert-3-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-vert-3.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-vert-4-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-vert-4.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-vert-rtl-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-vert-rtl-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-vert-rtl-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-vert-rtl-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-vert-rtl-3-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-vert-rtl-3.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-vert-rtl-4-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-vert-rtl-4.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-block-horiz-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-block-horiz-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-block-vert-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-block-vert-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-canvas-horiz-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-canvas-horiz-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-canvas-horiz-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-canvas-horiz-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-canvas-vert-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-canvas-vert-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-canvas-vert-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-canvas-vert-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-fieldset-horiz-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-fieldset-horiz-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-fieldset-horiz-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-fieldset-horiz-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-fieldset-vert-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-fieldset-vert-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-fieldset-vert-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-fieldset-vert-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-iframe-horiz-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-iframe-horiz-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-iframe-horiz-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-iframe-horiz-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-iframe-vert-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-iframe-vert-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-iframe-vert-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-iframe-vert-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-img-horiz-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-img-horiz-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-img-horiz-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-img-horiz-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-img-vert-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-img-vert-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-img-vert-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-img-vert-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-textarea-horiz-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-textarea-horiz-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-textarea-horiz-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-textarea-horiz-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-textarea-vert-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-textarea-vert-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-textarea-vert-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-textarea-vert-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-video-horiz-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-video-horiz-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-video-horiz-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-video-horiz-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-video-vert-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-video-vert-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-video-vert-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-basic-video-vert-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-insertAroundText-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-insertAroundText-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-insertAroundText-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-insertAroundText-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-insertAroundText-3-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-insertAroundText-3.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-empty-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-empty-1a.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-empty-1b.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-float-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-float-1a.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-float-1b.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-float-1c.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-float-1d.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-float-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-float-2a.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-float-2b.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-inlinecontent-horiz-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-inlinecontent-horiz-1a.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-inlinecontent-horiz-1b.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-inlinecontent-horiz-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-inlinecontent-horiz-3-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-inlinecontent-horiz-3a.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-inlinecontent-horiz-4-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-inlinecontent-horiz-4.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-inlinecontent-horiz-5-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-inlinecontent-horiz-5.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-inlinecontent-horiz-6-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-inlinecontent-horiz-6.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1b.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2a.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2b.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-invalidation-1-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-invalidation-1.html
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-horiz-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-horiz-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-horiz-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-horiz-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-horiz-3-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-horiz-3.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-horiz-4-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-horiz-4.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-horiz-5-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-horiz-5.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-vert-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-vert-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-vert-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-vert-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-vert-3-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-vert-3.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-vert-4-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-vert-4.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-vert-5-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-justify-content-vert-5.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-margin-auto-horiz-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-margin-auto-horiz-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-margin-auto-horiz-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-margin-auto-horiz-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-mbp-horiz-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-mbp-horiz-1-reverse-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-mbp-horiz-1-reverse.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-mbp-horiz-1-rtl-reverse.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-mbp-horiz-1-rtl.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-mbp-horiz-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-mbp-horiz-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-mbp-horiz-2a.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-mbp-horiz-2b.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-mbp-horiz-3-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-mbp-horiz-3-reverse-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-mbp-horiz-3-reverse.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-mbp-horiz-3.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-minSize-horiz-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-minSize-horiz-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-minSize-vert-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-minSize-vert-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-position-absolute-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-position-absolute-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-position-absolute-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-position-absolute-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-position-absolute-3-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-position-absolute-3.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-position-absolute-4-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-position-absolute-4.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-position-fixed-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-position-fixed-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-position-fixed-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-position-fixed-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-position-fixed-3-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-position-fixed-3.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-position-fixed-4-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-position-fixed-4.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-resizeviewport-1-helper.html
 create mode 100644 layout/reftests/flexbox/flexbox-resizeviewport-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-resizeviewport-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-sizing-horiz-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-sizing-horiz-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-sizing-vert-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-sizing-vert-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-table-fixup-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-table-fixup-1a.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-table-fixup-1b.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-whitespace-handling-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-whitespace-handling-1a.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-whitespace-handling-1b.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-whitespace-handling-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-whitespace-handling-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-whitespace-handling-3-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-whitespace-handling-3.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-widget-flex-items-1-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-widget-flex-items-1.html
 create mode 100644 layout/reftests/flexbox/flexbox-widget-flex-items-2-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-widget-flex-items-2.html
 create mode 100644 layout/reftests/flexbox/flexbox-widget-flex-items-3-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-widget-flex-items-3.html
 create mode 100644 layout/reftests/flexbox/flexbox-widget-flex-items-4-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-widget-flex-items-4.html
 create mode 100644 layout/reftests/flexbox/reftest.list
 create mode 100644 layout/reftests/flexbox/solidblue.png

diff --git a/layout/reftests/flexbox/ahem.css b/layout/reftests/flexbox/ahem.css
new file mode 100644
index 000000000000..884a41198b8b
--- /dev/null
+++ b/layout/reftests/flexbox/ahem.css
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "Ahem";
+  src: url(../fonts/Ahem.ttf);
+}
diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-1-ref.xhtml
new file mode 100644
index 000000000000..5e86a376a33a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-1-ref.xhtml
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for behavior of the 'baseline' value for align-items and
+     align-self.
+
+     NOTE: For multi-line 'display: block' elements in the testcase (and inline
+     content that gets wrapped in an anonymous block), we add an inline-table
+     wrapper here in the reference case, so that we get first-line baseline
+     alignment instead of the last-line baseline-alignment that an inline-block
+     would give us.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        display: block;
+        border: 1px dashed blue;
+        font: 14px sans-serif;
+      }
+
+      div   { display: inline-block; }
+      table { display: inline-table; }
+
+      .big {
+        height: 100px;
+        font: 24px sans-serif;
+        margin-top: 20px;
+      }
+      .super {
+        vertical-align: super;
+        font-size: 12px;
+      }
+      .sub {
+        vertical-align: sub;
+        font-size: 12px;
+      }
+
+      .lime   { background: lime;   }
+      .yellow { background: yellow; }
+      .orange { background: orange; }
+      .pink   { background: pink;   }
+      .aqua   { background: aqua;   }
+      .violet { background: violet; }
+      .tan    { background: tan;    }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="lime">blk_1line</div
+      ><table cellspacing="0" cellpadding="0"
+              class="yellow">blk<br/>2lines</table
+      ><div class="orange"><span class="super">super</span></div
+      ><div class="pink"><span class="sub">sub</span></div
+      ><table cellspacing="0" cellpadding="0"
+              class="aqua big">big<br/>text<br/>3lines</table
+      ><table class="violet" border="1">
+        <tr><td>tr1</td></tr>
+        <tr><td>tr2</td></tr></table
+      ><table class="tan" cellspacing="0" cellpadding="0">
+        <i>ital<br/>ic</i>
+      </table>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-1.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-1.xhtml
new file mode 100644
index 000000000000..96c2b55a98ce
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-1.xhtml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for behavior of the 'baseline' value for align-items (and
+     align-self, implicitly). This test baseline-aligns various types of
+     content, and the flexbox's vertical size depends on the aggregate
+     post-alignment height of its children.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        display: -moz-flex;
+        -moz-align-items: baseline;
+        border: 1px dashed blue;
+        font: 14px sans-serif;
+      }
+
+      i {
+        /* XXXdholbert HACK - REMOVEME after bug 783415 lands (which will
+           make this display:block conversion happen automatically). */
+        display: block;
+      }
+
+      .big {
+        height: 100px;
+        font: 24px sans-serif;
+        margin-top: 20px;
+      }
+      .super {
+        vertical-align: super;
+        font-size: 12px;
+      }
+      .sub {
+        vertical-align: sub;
+        font-size: 12px;
+      }
+
+      .lime   { background: lime;   }
+      .yellow { background: yellow; }
+      .orange { background: orange; }
+      .pink   { background: pink;   }
+      .aqua   { background: aqua;   }
+      .violet { background: violet; }
+      .tan    { background: tan;    }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="lime">blk_1line</div>
+      <div class="yellow">blk<br/>2lines</div>
+      <div class="orange"><span class="super">super</span></div>
+      <div class="pink"><span class="sub">sub</span></div>
+      <div class="aqua big">big<br/>text<br/>3lines</div>
+      <table class="violet" border="1">
+        <tr><td>tr1</td></tr>
+        <tr><td>tr2</td></tr></table>
+      <i class="tan">ital<br/>ic</i>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2-ref.xhtml
new file mode 100644
index 000000000000..26033bf78f82
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2-ref.xhtml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for behavior of the 'baseline' value for align-items and
+     align-self.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        display: block;
+        border: 1px dashed blue;
+        font: 14px sans-serif;
+      }
+
+      input { height: 30px; }
+
+      textarea {
+        width: 30px;
+        height: 50px;
+      }
+
+      div.multilinebutton {
+        /* For comparison vs. "button.multilinebutton" in the testcase: */
+        -moz-appearance: button;
+        display: block;
+        text-align: center;
+        font: 20px sans-serif;
+        padding-top: 1px;
+        height: 49px;
+        width: 20px;
+      }
+
+      div   { display: inline-block; }
+      table { display: inline-table; }
+
+      .lime   { background: lime;   }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="lime">text</div
+      ><input type="text" style="width: 20px; min-width: 0;" value="input"
+     /><textarea style="width: 30px">t e x t a r e a </textarea
+      ><table cellspacing="0" cellpadding="0">
+        <div class="multilinebutton">b<br/>t<br/>n</div>
+      </table>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.xhtml
new file mode 100644
index 000000000000..33cddfd459ad
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.xhtml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for behavior of the 'baseline' value for align-items (and
+     align-self, implicitly). This test baseline-aligns various types of
+     content, and the flexbox's vertical size depends on the aggregate
+     post-alignment height of its children.
+
+     This test checks baseline-alignment for a text <input> field, a
+     <textarea>, and a <button> with a multi-line label.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        display: -moz-flex;
+        -moz-align-items: baseline;
+        border: 1px dashed blue;
+        font: 14px sans-serif;
+      }
+
+      input { height: 30px; }
+
+      textarea {
+        width: 30px;
+        height: 50px;
+      }
+
+      button.multilinebutton {
+        font: 20px sans-serif;
+        color: black;
+        padding: 0;
+        height: 50px;
+        width: 20px;
+        -moz-box-sizing: content-box;
+      }
+
+      .lime   { background: lime;   }
+      .orange { background: orange; }
+      .pink   { background: pink;   }
+      .aqua   { background: aqua;   }
+      .violet { background: violet; }
+      .tan    { background: tan;    }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="lime">text</div>
+      <input type="text" style="width: 20px; min-width: 0;" value="input"/>
+      <textarea style="width: 30px">t e x t a r e a </textarea>
+      <button class="multilinebutton">b<br/>t<br/>n</button>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3-ref.xhtml
new file mode 100644
index 000000000000..34a1b081c35a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3-ref.xhtml
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for behavior of the 'baseline' value for align-items and
+     align-self.
+
+     NOTE: For multi-line 'display: block' flex items in the testcase, we use
+     an inline-table here in the reference case, so that we get first-line
+     baseline alignment. (If we used an inline-block instead, that would give
+     us *last-line* baseline alignment.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        display: block;
+        border: 1px dashed blue;
+        font: 14px sans-serif;
+      }
+
+      div   { display: inline-block; }
+      table { display: inline-table; }
+
+      .big {
+        height: 100px;
+        font: 24px sans-serif;
+        margin-top: 20px;
+      }
+
+      .lime   { background: lime;   }
+      .pink   { background: pink;   }
+      .aqua   { background: aqua;   }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="lime">text</div
+      ><button>btn</button
+      ><input type="radio"
+     /><input type="checkbox"
+     /><label class="pink">label</label
+      ><table cellspacing="0" cellpadding="0"  class="aqua">
+        <label>lab<br/>el</label>
+      </table
+      ><table cellspacing="0" cellpadding="0">
+        <fieldset>field<br/>set</fieldset>
+      </table
+      ><table cellspacing="0" cellpadding="0">
+        <fieldset><legend>leg</legend>field<br/>set</fieldset>
+      </table
+      ><table cellspacing="0" cellpadding="0">
+        <fieldset><legend>leg<br/>end</legend>field<br/>set</fieldset>
+      </table>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3.xhtml
new file mode 100644
index 000000000000..4a87ae97de51
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3.xhtml
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for behavior of the 'baseline' value for align-items (and
+     align-self, implicitly).  This test has various types of baseline-aligned
+     content, and the flexbox's vertical size depends on the aggregate
+     post-alignment height of its children.
+
+     This test checks baseline-alignment for text <button>, for
+     various <input> fields, for <label>, and for <fieldset>.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        display: -moz-flex;
+        -moz-align-items: baseline;
+        border: 1px dashed blue;
+        font: 14px sans-serif;
+      }
+
+      input, label {
+        /* XXXdholbert HACK - REMOVEME after bug 783415 lands (which will
+           make this display:block conversion happen automatically). */
+        display: block;
+      }
+
+      .big {
+        height: 100px;
+        font: 24px sans-serif;
+        margin-top: 20px;
+      }
+
+      .lime   { background: lime;   }
+      .pink   { background: pink;   }
+      .aqua   { background: aqua;   }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="lime">text</div>
+      <button>btn</button>
+      <input type="radio"/>
+      <input type="checkbox"/>
+      <label class="pink">label</label>
+      <label class="aqua">lab<br/>el</label>
+      <fieldset>field<br/>set</fieldset>
+      <fieldset><legend>leg</legend>field<br/>set</fieldset>
+      <fieldset><legend>leg<br/>end</legend>field<br/>set</fieldset>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-horiz-1-ref.xhtml
new file mode 100644
index 000000000000..7de7df769dd3
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-1-ref.xhtml
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior, using floated divs
+     in place of flex items and using margin-top in place of the align-items /
+     align-self properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        height: 200px;
+        width: 560px;
+        font-size: 10px;
+        line-height: 10px;
+      }
+
+      .flexbox > div {
+        width: 40px;
+        float: left;
+      }
+
+      .big {
+        height: 100px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+      }
+      .flex-end {
+        background: orange;
+      }
+      .center {
+        background: lightblue;
+      }
+      .baseline {
+        background: teal;
+      }
+      .stretch {
+        background: pink;
+      }
+      .auto {
+        background: yellow;
+      }
+      .unspecified {
+        background: lightgreen;
+      }
+      .initial {
+        background: aqua;
+      }
+      .inherit {
+        background: violet;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end" style="margin-top: 190px">end</div>
+      <div class="flex-end big"  style="margin-top: 100px">a b c d e f</div>
+      <div class="center" style="margin-top: 95px">center</div>
+      <div class="center big" style="margin-top: 50px">a b c d e f</div>
+      <!-- We use inline-blocks inside of a wrapper-block as references for the
+           baseline-aligned flex items, since inline-blocks get
+           baseline-aligned in block layout. We also need to specify the widths
+           manually here since the "flexbox > div" child-selector doesn't
+           handle these guys (since they're grandchildren).
+        -->
+      <div style="width: 80px">
+        <div class="baseline"
+             style="width: 40px; display: inline-block">base</div
+       ><div class="baseline big"
+             style="width: 40px; display: inline-block">abc</div>
+      </div>
+      <div class="stretch" style="height: 100%">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+      <div class="auto" style="margin-top: 95px">auto</div>
+      <div class="unspecified" style="margin-top: 95px">unspec</div>
+      <div class="initial" style="margin-top: 95px">initial</div>
+      <div class="inherit" style="margin-top: 190px">inherit</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-horiz-1.xhtml b/layout/reftests/flexbox/flexbox-align-self-horiz-1.xhtml
new file mode 100644
index 000000000000..0211b25bc264
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-1.xhtml
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        height: 200px;
+        width: -moz-fit-content;
+        display: -moz-flex;
+        font-size: 10px;
+        line-height: 10px;
+
+        /* Any children whose align-self is 'auto' (or unspecified, or
+           -moz-initial) will end up taking this value from us: */
+        -moz-align-items: center;
+
+        /* Any children whose align-self is 'inherit' will end up
+           inheriting this value from us: */
+        -moz-align-self: flex-end;
+      }
+
+      .flexbox > div {
+        width: 40px;
+      }
+
+      .big {
+        height: 100px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        -moz-align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        -moz-align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        -moz-align-self: center;
+      }
+      .baseline {
+        background: teal;
+        -moz-align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        -moz-align-self: stretch;
+      }
+      .auto {
+        background: yellow;
+        -moz-align-self: auto;
+      }
+      .unspecified {
+        background: lightgreen;
+      }
+      .initial {
+        background: aqua;
+        -moz-align-self: -moz-initial;
+      }
+      .inherit {
+        background: violet;
+        -moz-align-self: inherit;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+      <div class="auto">auto</div>
+      <div class="unspecified">unspec</div>
+      <div class="initial">initial</div>
+      <div class="inherit">inherit</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-horiz-2-ref.xhtml
new file mode 100644
index 000000000000..673043aacb9f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-2-ref.xhtml
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior, using floated divs
+     in place of flex items and using relative positioning in place of the
+     align-items / align-self properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        height: 200px;
+        width: -moz-fit-content;
+        font-size: 10px;
+        line-height: 10px;
+      }
+
+      .flexbox > div {  float: left }
+      .flex-start, .flex-end, .center, .baseline, .stretch,
+      .auto, .unspecified, .initial, .inherit {
+        width: 40px;
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+        position: relative;
+        border-style: dotted;
+      }
+
+      .big {
+        height: 100px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+      }
+      .flex-end {
+        background: orange;
+      }
+      .center {
+        background: lightblue;
+      }
+      .baseline {
+        background: teal;
+      }
+      .stretch {
+        background: pink;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end" style="top: 172px">end</div>
+      <div class="flex-end big"  style="top: 82px">a b c d e f</div>
+      <div class="center" style="top: 86px">center</div>
+      <div class="center big" style="top: 41px">a b c d e f</div>
+    </div>
+    <div class="flexbox">
+      <!-- We use inline-blocks inside of a wrapper-block as references for the
+           baseline-aligned flex items, since inline-blocks get
+           baseline-aligned in block layout. We also need to specify the widths
+           manually here since the "flexbox > div" child-selector doesn't
+           handle these guys (since they're grandchildren).
+        -->
+      <div style="width: -moz-fit-content;">
+        <div class="baseline"
+             style="display: inline-block">base</div
+       ><div class="baseline big"
+             style="display: inline-block">abc</div>
+      </div>
+      <div class="stretch" style="height: 182px">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-horiz-2.xhtml b/layout/reftests/flexbox/flexbox-align-self-horiz-2.xhtml
new file mode 100644
index 000000000000..46cb58bcd122
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-2.xhtml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with
+     margin/border/padding values on each item. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        height: 200px;
+        width: -moz-fit-content;
+        display: -moz-flex;
+        font-size: 10px;
+        line-height: 10px;
+      }
+
+      .flexbox > div {
+        width: 40px;
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+
+        border-style: dotted;
+      }
+
+      .big {
+        height: 100px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        -moz-align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        -moz-align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        -moz-align-self: center;
+      }
+      .baseline {
+        background: teal;
+        -moz-align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        -moz-align-self: stretch;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+    </div>
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-horiz-3-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-horiz-3-ref.xhtml
new file mode 100644
index 000000000000..f65d1df82b3e
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-3-ref.xhtml
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior, using floated divs
+     in place of flex items and using relative positioning in place of the
+     align-items / align-self properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        padding: 3px;
+        width: 560px;
+        height: 4px;
+        font-size: 10px;
+        line-height: 10px;
+        font-family: sans-serif;
+      }
+
+      .flexbox > div {
+        width: 40px;
+        float: left;
+      }
+
+      .big {
+        height: 100px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+      }
+      .flex-end {
+        background: orange;
+      }
+      .center {
+        background: lightblue;
+      }
+      .baseline {
+        background: teal;
+      }
+      .stretch {
+        background: pink;
+      }
+      .auto {
+        background: yellow;
+      }
+      .unspecified {
+        background: lightgreen;
+      }
+      .initial {
+        background: aqua;
+      }
+      .inherit {
+        background: violet;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end" style="position: relative; top: -6px">end</div>
+      <div class="flex-end big"  style="position: relative; top: -96px">a b c d e f</div>
+      <div class="center" style="position: relative; top: -3px">center</div>
+      <div class="center big" style="position: relative; top: -48px">a b c d e f</div>
+      <!-- We use inline-blocks inside of a wrapper-block as references for the
+           baseline-aligned flex items, since inline-blocks get
+           baseline-aligned in block layout. We also need to specify the widths
+           manually here since the "flexbox > div" child-selector doesn't
+           handle these guys (since they're grandchildren).
+        -->
+      <div style="width: 80px">
+        <div class="baseline"
+             style="width: 40px; display: inline-block">base</div
+       ><div class="baseline big"
+             style="width: 40px; display: inline-block">abc</div>
+      </div>
+      <div class="stretch" style="height: 100%">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+      <div class="auto" style="height: 100%">auto</div>
+      <div class="unspecified" style="height: 100%">unspec</div>
+      <div class="initial" style="height: 100%">initial</div>
+      <div class="inherit" style="height: 100%">inherit</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-horiz-3.xhtml b/layout/reftests/flexbox/flexbox-align-self-horiz-3.xhtml
new file mode 100644
index 000000000000..a5d0369476b1
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-3.xhtml
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with the
+     flex container being shorter than its items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        padding: 3px;
+        height: 4px;
+        width: -moz-fit-content;
+        display: -moz-flex;
+        font-size: 10px;
+        line-height: 10px;
+        font-family: sans-serif;
+      }
+
+      .flexbox > div {
+        width: 40px;
+      }
+
+      .big {
+        height: 100px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        -moz-align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        -moz-align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        -moz-align-self: center;
+      }
+      .baseline {
+        background: teal;
+        -moz-align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        -moz-align-self: stretch;
+      }
+      .auto {
+        background: yellow;
+        -moz-align-self: auto;
+      }
+      .unspecified {
+        background: lightgreen;
+      }
+      .initial {
+        background: aqua;
+        -moz-align-self: -moz-initial;
+      }
+      .inherit {
+        background: violet;
+        -moz-align-self: inherit;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+      <div class="auto">auto</div>
+      <div class="unspecified">unspec</div>
+      <div class="initial">initial</div>
+      <div class="inherit">inherit</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-horiz-4-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-horiz-4-ref.xhtml
new file mode 100644
index 000000000000..092287918da7
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-4-ref.xhtml
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior, using floated divs
+     in place of flex items and using relative positioning in place of the
+     align-items / align-self properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        padding: 3px;
+        height: 4px;
+        width: -moz-fit-content;
+        font-size: 10px;
+        line-height: 10px;
+        font-family: sans-serif;
+        margin-top: 20px;
+        margin-bottom: 120px;
+      }
+
+      .flexbox > div {  float: left }
+      .flex-start, .flex-end, .center, .baseline, .stretch,
+      .auto, .unspecified, .initial, .inherit {
+        width: 40px;
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+        position: relative;
+        border-style: dotted;
+      }
+
+      .big {
+        height: 100px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+      }
+      .flex-end {
+        background: orange;
+      }
+      .center {
+        background: lightblue;
+      }
+      .baseline {
+        background: teal;
+      }
+      .stretch {
+        background: pink;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end" style="top: -24px">end</div>
+      <div class="flex-end big"  style="top: -114px">a b c d e f</div>
+      <div class="center" style="top: -12px">center</div>
+      <div class="center big" style="top: -57px">a b c d e f</div>
+    </div>
+    <div class="flexbox">
+      <!-- We use inline-blocks inside of a wrapper-block as references for the
+           baseline-aligned flex items, since inline-blocks get
+           baseline-aligned in block layout. We also need to specify the widths
+           manually here since the "flexbox > div" child-selector doesn't
+           handle these guys (since they're grandchildren).
+        -->
+      <div style="width: -moz-fit-content;">
+        <div class="baseline"
+             style="display: inline-block">base</div
+       ><div class="baseline big"
+             style="display: inline-block">abc</div>
+      </div>
+      <div class="stretch" style="height: 2px">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-horiz-4.xhtml b/layout/reftests/flexbox/flexbox-align-self-horiz-4.xhtml
new file mode 100644
index 000000000000..88619e864c96
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-4.xhtml
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with the
+     flex container being shorter than its items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        padding: 3px;
+        height: 4px;
+        width: -moz-fit-content;
+        display: -moz-flex;
+        font-size: 10px;
+        line-height: 10px;
+        font-family: sans-serif;
+        margin-top: 20px;
+        margin-bottom: 120px;
+      }
+
+      .flexbox > div {
+        width: 40px;
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+
+        border-style: dotted;
+      }
+
+      .big {
+        height: 100px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        -moz-align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        -moz-align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        -moz-align-self: center;
+      }
+      .baseline {
+        background: teal;
+        -moz-align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        min-height: 2px;
+        -moz-align-self: stretch;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+    </div>
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-horiz-5-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-horiz-5-ref.xhtml
new file mode 100644
index 000000000000..98410f9f5da0
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-5-ref.xhtml
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior with auto
+     margins in play. This reference case uses fixed margin-top values
+     in place of the testcase's auto margins. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        height: 140px;
+        width: 400px;
+        display: -moz-flex;
+        font-size: 10px;
+        line-height: 10px;
+        margin-bottom: 10px;
+      }
+
+      .kidsAutoTop > div      { margin-top: 130px;   }
+      .kidsAutoTop > div.big  { margin-top: 60px;   }
+      .kidsAutoBoth > div     { margin-top: 65px; }
+      .kidsAutoBoth > div.big { margin-top: 30px; }
+
+      .flexbox > div {
+        width: 40px;
+        height: 10px;
+      }
+
+      .flexbox > div.big {
+        height: 80px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+      }
+      .flex-end {
+        background: orange;
+      }
+      .center {
+        background: lightblue;
+      }
+      .baseline {
+        background: teal;
+      }
+      .stretch {
+        background: pink;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox kidsAutoTop">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">a b c d e f</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+
+    <div class="flexbox kidsAutoBottom">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">a b c d e f</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+
+    <div class="flexbox kidsAutoBoth">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">a b c d e f</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-horiz-5.xhtml b/layout/reftests/flexbox/flexbox-align-self-horiz-5.xhtml
new file mode 100644
index 000000000000..7fdb428d056c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-horiz-5.xhtml
@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior with auto margins in
+     play (which should negate the effects of align-items / align-self,
+     because there won't be any available space in which to align the item
+     after the auto margins are resolved).  -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        height: 140px;
+        width: 400px;
+        display: -moz-flex;
+        font-size: 10px;
+        line-height: 10px;
+        margin-bottom: 10px;
+      }
+
+      .kidsAutoTop > div    { margin-top: auto;    }
+      .kidsAutoBottom > div { margin-bottom: auto; }
+      .kidsAutoBoth > div   { margin: auto 0; }
+
+      .flexbox > div {
+        width: 40px;
+      }
+
+      .flexbox > div.big {
+        height: 80px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        -moz-align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        -moz-align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        -moz-align-self: center;
+      }
+      .baseline {
+        background: teal;
+        -moz-align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        -moz-align-self: stretch;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox kidsAutoTop">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">a b c d e f</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+
+    <div class="flexbox kidsAutoBottom">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">a b c d e f</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+
+    <div class="flexbox kidsAutoBoth">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">a b c d e f</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-vert-1-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-vert-1-ref.xhtml
new file mode 100644
index 000000000000..d1d51a69ec1b
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-1-ref.xhtml
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior, using blocks in
+     place of flex items and using float and width keywords to emulate the
+     align-items / align-self properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        font-size: 10px;
+      }
+
+      div.big {
+        font-size: 20px;
+        width: 50px;
+      }
+
+      .flexbox > * {
+        clear: both;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        width: -moz-max-content;
+      }
+      .flex-end {
+        background: orange;
+        float: right;
+        width: -moz-max-content;
+      }
+      .center {
+        background: lightblue;
+        margin: auto;
+        width: -moz-max-content;
+      }
+      .baseline {
+        background: teal;
+        width: -moz-max-content;
+      }
+      .stretch {
+        background: pink;
+        width: 100%;
+      }
+      .auto {
+        background: yellow;
+        margin: auto;
+        width: -moz-max-content;
+      }
+      .unspecified {
+        background: lightgreen;
+        margin: auto;
+        width: -moz-max-content;
+      }
+      .initial {
+        background: aqua;
+        margin: auto;
+        width: -moz-max-content;
+      }
+      .inherit {
+        background: violet;
+        float: right;
+        width: -moz-max-content;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+      <div class="auto">auto</div>
+      <div class="unspecified">unspec</div>
+      <div class="initial">initial</div>
+      <div class="inherit">inherit</div>
+      <!-- Since that last div is floated right, the container doesn't include
+           its height by default. So we add some invisible hacky text (of the
+           same font) to make sure our container is tall enough. -->
+      <span style="visibility:hidden">hacky text</span>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-vert-1.xhtml b/layout/reftests/flexbox/flexbox-align-self-vert-1.xhtml
new file mode 100644
index 000000000000..7362a4ccf32d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-1.xhtml
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+        font-size: 10px;
+
+        /* Any children whose align-self is 'auto' (or unspecified, or
+           -moz-initial) will end up taking this value from us: */
+        -moz-align-items: center;
+
+        /* Any children whose align-self is 'inherit' will end up
+           inheriting this value from us: */
+        -moz-align-self: flex-end;
+      }
+
+      .big {
+        font-size: 20px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        -moz-align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        -moz-align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        -moz-align-self: center;
+      }
+      .baseline {
+        background: teal;
+        -moz-align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        -moz-align-self: stretch;
+      }
+      .auto {
+        background: yellow;
+        -moz-align-self: auto;
+      }
+      .unspecified {
+        background: lightgreen;
+      }
+      .initial {
+        background: aqua;
+        -moz-align-self: -moz-initial;
+      }
+      .inherit {
+        background: violet;
+        -moz-align-self: inherit;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+      <div class="auto">auto</div>
+      <div class="unspecified">unspec</div>
+      <div class="initial">initial</div>
+      <div class="inherit">inherit</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-vert-2-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-vert-2-ref.xhtml
new file mode 100644
index 000000000000..0001f50bb90a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-2-ref.xhtml
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior, using blocks in
+     place of flex items and using float and width keywords to emulate the
+     align-items / align-self properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        float: left;
+        font-size: 10px;
+      }
+
+      .flex-start, .flex-end, .center, .baseline, .stretch {
+        clear: both;
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+        border-style: dotted;
+      }
+
+      div.big {
+        font-size: 20px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        width: -moz-max-content;
+        float: left;
+      }
+      .flex-end {
+        background: orange;
+        width: -moz-max-content;
+        float: right;
+      }
+      .center {
+        background: lightblue;
+        width: -moz-max-content;
+        float: left;
+      }
+      .baseline {
+        background: teal;
+        width: -moz-max-content;
+      }
+      .stretch {
+        background: pink;
+        width: auto;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div style="margin: auto; width: -moz-max-content">
+        <div class="center">center</div>
+      </div>
+      <div style="margin: auto; width: -moz-max-content">
+        <div class="center big">a b c d e f</div>
+      </div>
+    </div>
+    <!-- NOTE: I'm not using floats in this flex container, since floating
+         makes it harder to emulate the "stretch" behavior.
+         (We need to use width: auto - not width:100% - because we need to
+         allow space for our margins/borders/padding. And width:auto doesn't do
+         what we want if we're floated.)
+
+         However, since our children aren't floated, their adjacent vertical
+         margins will collapse by default (which doesn't match what happens in
+         the testcase, since margins don't collapse in a flexbox).  So, we
+         compensate for that by bumping up the margin-top value on every
+         collapsed top-margin to "4px", which is the total amount of vertical
+         margin we're expecting between consecutive flex items in the testcase.
+         (4px = 3px margin-bottom + 1px margin-top)
+      -->
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big" style="margin-top: 4px">abc</div>
+      <div class="stretch" style="margin-top: 4px">stretch</div>
+      <div class="stretch big" style="margin-top: 4px">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-vert-2.xhtml b/layout/reftests/flexbox/flexbox-align-self-vert-2.xhtml
new file mode 100644
index 000000000000..9f5ab1064053
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-2.xhtml
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with
+     margin/border/padding values on each item. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+        float: left;
+        font-size: 10px;
+      }
+
+      .flexbox > div {
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+
+        border-style: dotted;
+      }
+
+      div.big {
+        font-size: 20px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        -moz-align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        -moz-align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        -moz-align-self: center;
+      }
+      .baseline {
+        background: teal;
+        -moz-align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        -moz-align-self: stretch;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+    </div>
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-vert-3-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-vert-3-ref.xhtml
new file mode 100644
index 000000000000..cdfa5006dd9e
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-3-ref.xhtml
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior, using blocks in
+     place of flex items and using float and width keywords to emulate the
+     align-items / align-self properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 4px;
+        font-family: sans-serif;
+        font-size: 10px;
+        margin-left: 80px;
+      }
+
+      div.big {
+        font-size: 18px;
+        width: 50px;
+      }
+
+      .flexbox > * {
+        clear: both;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        width: -moz-max-content;
+      }
+      .flex-end {
+        background: orange;
+        float: right;
+        width: -moz-max-content;
+      }
+      .center {
+        background: lightblue;
+        margin: auto;
+        width: -moz-max-content;
+      }
+      .baseline {
+        background: teal;
+        width: -moz-max-content;
+      }
+      .stretch {
+        background: pink;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b</div>
+      <!-- We're using auto margins as references for "align-self:center", but
+           auto margins only work if we've got extra space available, and we
+           don't have extra space available in this case.  So, we create a
+           wide wrapper-div that _will_ have space available.  We position
+           that wrapper-div using a negative margin, so that centering in it
+           is equivalent to centering in our reference for the flex container.
+        -->
+      <div style="width: 100px; margin-left: -48px">
+        <div class="center">center</div>
+        <div class="center big">a b</div>
+      </div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-vert-3.xhtml b/layout/reftests/flexbox/flexbox-align-self-vert-3.xhtml
new file mode 100644
index 000000000000..37708d4dbcaf
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-3.xhtml
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with the
+     flex container being skinnier than its items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 4px;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+        font-family: sans-serif;
+        font-size: 10px;
+        margin-left: 80px;
+      }
+
+      div.big {
+        font-size: 18px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        -moz-align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        -moz-align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        -moz-align-self: center;
+      }
+      .baseline {
+        background: teal;
+        -moz-align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        -moz-align-self: stretch;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b</div>
+      <div class="center">center</div>
+      <div class="center big">a b</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-vert-4-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-vert-4-ref.xhtml
new file mode 100644
index 000000000000..6e2522e935ea
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-4-ref.xhtml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior, using blocks in
+     place of flex items and using float and width keywords to emulate the
+     align-items / align-self properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 4px;
+        float: left;
+        font-family: sans-serif;
+        font-size: 10px;
+        margin-left: 80px;
+      }
+
+      .flex-start, .flex-end, .center, .baseline, .stretch {
+        clear: both;
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+        border-style: dotted;
+      }
+
+      div.big {
+        font-size: 18px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        width: -moz-max-content;
+        float: left;
+      }
+      .flex-end {
+        background: orange;
+        width: -moz-max-content;
+        float: right;
+      }
+      .center {
+        background: lightblue;
+        width: -moz-max-content;
+      }
+      .baseline {
+        background: teal;
+        width: -moz-max-content;
+      }
+      .stretch {
+        background: pink;
+        width: auto;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big" style="margin-bottom: 4px">a b</div>
+      <!-- We're using auto margins as references for "align-self:center", but
+           auto margins only work if we've got extra space available, and we
+           don't have extra space available in this case.  So, we create a
+           wide wrapper-div that _will_ have space available.  We position
+           that wrapper-div using a negative margin, so that centering in it
+           is equivalent to centering in our reference for the flex container.
+        -->
+      <div style="width: 100px; margin-left: -48px">
+        <div style="margin: auto; width: -moz-max-content">
+          <div class="center">center</div>
+        </div>
+        <div style="margin: auto; width: -moz-max-content">
+          <div class="center big" style="margin-top: 4px">a b</div>
+        </div>
+      </div>
+    </div>
+    <!-- NOTE: I'm not using floats in this flex container, since floating
+         makes it harder to emulate the "stretch" behavior.
+         (We need to use width: auto - not width:100% - because we need to
+         allow space for our margins/borders/padding. And width:auto doesn't do
+         what we want if we're floated.)
+
+         However, since our children aren't floated, their adjacent vertical
+         margins will collapse by default (which doesn't match what happens in
+         the testcase, since margins don't collapse in a flexbox).  So, we
+         compensate for that by bumping up the margin-top value on every
+         collapsed top-margin to "4px", which is the total amount of vertical
+         margin we're expecting between consecutive flex items in the testcase.
+         (4px = 3px margin-bottom + 1px margin-top)
+      -->
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big" style="margin-top: 4px">abc</div>
+      <div class="stretch" style="margin-top: 4px">stretch</div>
+      <div class="stretch big" style="margin-top: 4px">a b</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-vert-4.xhtml b/layout/reftests/flexbox/flexbox-align-self-vert-4.xhtml
new file mode 100644
index 000000000000..f3724711f442
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-4.xhtml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with the
+     flex container being skinnier than its items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 4px;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+        float: left;
+        font-family: sans-serif;
+        font-size: 10px;
+        margin-left: 80px;
+      }
+
+      .flexbox > div {
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+
+        border-style: dotted;
+      }
+
+      div.big {
+        font-size: 18px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        -moz-align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        -moz-align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        -moz-align-self: center;
+      }
+      .baseline {
+        background: teal;
+        -moz-align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        -moz-align-self: stretch;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b</div>
+      <div class="center">center</div>
+      <div class="center big">a b</div>
+    </div>
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-vert-rtl-1-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-1-ref.xhtml
new file mode 100644
index 000000000000..9dab46d03726
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-1-ref.xhtml
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior in a vertical
+     "direction: rtl" flex container, using blocks in place of flex items and
+     using float and width keywords to emulate the align-items / align-self
+     properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        direction: rtl;
+        font-family: sans-serif;
+        font-size: 10px;
+      }
+
+      div.big {
+        font-size: 20px;
+        width: 50px;
+      }
+
+      .flexbox > * {
+        clear: both;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        width: -moz-max-content;
+      }
+      .flex-end {
+        background: orange;
+        float: left;
+        width: -moz-max-content;
+      }
+      .center {
+        background: lightblue;
+        margin: auto;
+        width: -moz-max-content;
+      }
+      .baseline {
+        background: teal;
+        width: -moz-max-content;
+      }
+      .stretch {
+        background: pink;
+        width: 100%;
+      }
+      .auto {
+        background: yellow;
+        margin: auto;
+        width: -moz-max-content;
+      }
+      .unspecified {
+        background: lightgreen;
+        margin: auto;
+        width: -moz-max-content;
+      }
+      .initial {
+        background: aqua;
+        margin: auto;
+        width: -moz-max-content;
+      }
+      .inherit {
+        background: violet;
+        float: left;
+        width: -moz-max-content;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+      <div class="auto">auto</div>
+      <div class="unspecified">unspec</div>
+      <div class="initial">initial</div>
+      <div class="inherit">inherit</div>
+      <!-- Since that last div is floated right, the container doesn't include
+           its height by default. So we add some invisible hacky text (of the
+           same font) to make sure our container is tall enough. -->
+      <span style="visibility:hidden">hacky text</span>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-vert-rtl-1.xhtml b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-1.xhtml
new file mode 100644
index 000000000000..268b1f41fbba
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-1.xhtml
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with
+     "direction: rtl" to swap the horizontal (cross) axis. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+        direction: rtl;
+        font-family: sans-serif;
+        font-size: 10px;
+
+        /* Any children whose align-self is 'auto' (or unspecified, or
+           -moz-initial) will end up taking this value from us: */
+        -moz-align-items: center;
+
+        /* Any children whose align-self is 'inherit' will end up
+           inheriting this value from us: */
+        -moz-align-self: flex-end;
+      }
+
+      .big {
+        font-size: 20px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        -moz-align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        -moz-align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        -moz-align-self: center;
+      }
+      .baseline {
+        background: teal;
+        -moz-align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        -moz-align-self: stretch;
+      }
+      .auto {
+        background: yellow;
+        -moz-align-self: auto;
+      }
+      .unspecified {
+        background: lightgreen;
+      }
+      .initial {
+        background: aqua;
+        -moz-align-self: -moz-initial;
+      }
+      .inherit {
+        background: violet;
+        -moz-align-self: inherit;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+      <div class="auto">auto</div>
+      <div class="unspecified">unspec</div>
+      <div class="initial">initial</div>
+      <div class="inherit">inherit</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-vert-rtl-2-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-2-ref.xhtml
new file mode 100644
index 000000000000..ffaee61d881d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-2-ref.xhtml
@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior in a vertical
+     "direction: rtl" flex container, using blocks in place of flex items and
+     using float and width keywords to emulate the align-items / align-self
+     properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        float: left;
+        direction: rtl;
+        font-family: sans-serif;
+        font-size: 10px;
+      }
+
+      .flex-start, .flex-end, .center, .baseline, .stretch {
+        clear: both;
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+        border-style: dotted;
+      }
+
+      div.big {
+        font-size: 20px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        width: -moz-max-content;
+        float: right;
+      }
+      .flex-end {
+        background: orange;
+        width: -moz-max-content;
+        float: left;
+      }
+      .center {
+        background: lightblue;
+        width: -moz-max-content;
+        float: right;
+      }
+      .baseline {
+        background: teal;
+        width: -moz-max-content;
+      }
+      .stretch {
+        background: pink;
+        width: auto;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div style="margin: auto; width: -moz-max-content">
+        <div class="center">center</div>
+      </div>
+      <div style="margin: auto; width: -moz-max-content">
+        <div class="center big">a b c d e f</div>
+      </div>
+    </div>
+    <!-- NOTE: I'm not using floats in this flex container, since floating
+         makes it harder to emulate the "stretch" behavior.
+         (We need to use width: auto - not width:100% - because we need to
+         allow space for our margins/borders/padding. And width:auto doesn't do
+         what we want if we're floated.)
+
+         However, since our children aren't floated, their adjacent vertical
+         margins will collapse by default (which doesn't match what happens in
+         the testcase, since margins don't collapse in a flexbox).  So, we
+         compensate for that by bumping up the margin-top value on every
+         collapsed top-margin to "4px", which is the total amount of vertical
+         margin we're expecting between consecutive flex items in the testcase.
+         (4px = 3px margin-bottom + 1px margin-top)
+      -->
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big" style="margin-top: 4px">abc</div>
+      <div class="stretch" style="margin-top: 4px">stretch</div>
+      <div class="stretch big" style="margin-top: 4px">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-vert-rtl-2.xhtml b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-2.xhtml
new file mode 100644
index 000000000000..514f0cd31881
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-2.xhtml
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with
+     margin/border/padding values on each, and with "direction: rtl" to swap
+     the horizontal (cross) axis item. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+        direction: rtl;
+        float: left;
+        font-family: sans-serif;
+        font-size: 10px;
+      }
+
+      .flexbox > div {
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+
+        border-style: dotted;
+      }
+
+      div.big {
+        font-size: 20px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        -moz-align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        -moz-align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        -moz-align-self: center;
+      }
+      .baseline {
+        background: teal;
+        -moz-align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        -moz-align-self: stretch;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+    </div>
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-vert-rtl-3-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-3-ref.xhtml
new file mode 100644
index 000000000000..4c9fe8ae0c10
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-3-ref.xhtml
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior in a vertical
+     "direction: rtl" flex container, using blocks in place of flex items and
+     using float and width keywords to emulate the align-items / align-self
+     properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 4px;
+        font-family: sans-serif;
+        direction: rtl;
+        font-size: 10px;
+        margin-left: 80px;
+      }
+
+      div.big {
+        font-size: 18px;
+        width: 50px;
+      }
+
+      .flexbox > * {
+        clear: both;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        width: -moz-max-content;
+      }
+      .flex-end {
+        background: orange;
+        float: left;
+        width: -moz-max-content;
+      }
+      .center {
+        background: lightblue;
+        margin: auto;
+        width: -moz-max-content;
+      }
+      .baseline {
+        background: teal;
+        width: -moz-max-content;
+      }
+      .stretch {
+        background: pink;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b</div>
+      <!-- We're using auto margins as references for "align-self:center", but
+           auto margins only work if we've got extra space available, and we
+           don't have extra space available in this case.  So, we create a
+           wide wrapper-div that _will_ have space available.  We position
+           that wrapper-div using a negative margin, so that centering in it
+           is equivalent to centering in our reference for the flex container.
+        -->
+      <div style="width: 100px; margin-right: -48px">
+        <div class="center">center</div>
+        <div class="center big">a b</div>
+      </div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-vert-rtl-3.xhtml b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-3.xhtml
new file mode 100644
index 000000000000..522d0fe2a336
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-3.xhtml
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with the
+     flex container being skinnier than its items, and with "direction: rtl" to
+     swap the horizontal (cross) axis. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 4px;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+        direction: rtl;
+        font-family: sans-serif;
+        font-size: 10px;
+        margin-left: 80px;
+      }
+
+      div.big {
+        font-size: 18px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        -moz-align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        -moz-align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        -moz-align-self: center;
+      }
+      .baseline {
+        background: teal;
+        -moz-align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        -moz-align-self: stretch;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b</div>
+      <div class="center">center</div>
+      <div class="center big">a b</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-vert-rtl-4-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-4-ref.xhtml
new file mode 100644
index 000000000000..e2f2441ece1d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-4-ref.xhtml
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior in a vertical
+     "direction: rtl" flex container, using blocks in place of flex items and
+     using float and width keywords to emulate the align-items / align-self
+     properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 4px;
+        float: left;
+        direction: rtl;
+        font-family: sans-serif;
+        font-size: 10px;
+        margin-left: 80px;
+      }
+
+      .flex-start, .flex-end, .center, .baseline, .stretch {
+        clear: both;
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+        border-style: dotted;
+      }
+
+      div.big {
+        font-size: 18px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        width: -moz-max-content;
+      }
+      .flex-end {
+        background: orange;
+        width: -moz-max-content;
+        float: left;
+      }
+      .center {
+        background: lightblue;
+        width: -moz-max-content;
+      }
+      .baseline {
+        background: teal;
+        width: -moz-max-content;
+      }
+      .stretch {
+        background: pink;
+        width: auto;
+      }
+   </style>
+  </head>
+  <body>
+    <!-- NOTE: I'm not using floats in this flex container, since floating
+         makes it harder to emulate the "stretch" behavior.
+         (We need to use width: auto - not width:100% - because we need to
+         allow space for our margins/borders/padding. And width:auto doesn't do
+         what we want if we're floated.)
+
+         However, since our children aren't floated, their adjacent vertical
+         margins will collapse by default (which doesn't match what happens in
+         the testcase, since margins don't collapse in a flexbox).  So, we
+         compensate for that by bumping up the margin-top value on every
+         collapsed top-margin to "4px", which is the total amount of vertical
+         margin we're expecting between consecutive flex items in the testcase.
+         (4px = 3px margin-bottom + 1px margin-top)
+      -->
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big" style="margin-top: 4px">a b</div>
+      <div class="stretch"  style="margin-top: 4px">stretch</div>
+      <div class="stretch big" style="margin-top: 4px">a b</div>
+      <!-- We're using auto margins as references for "align-self:center", but
+           auto margins only work if we've got extra space available, and we
+           don't have extra space available in this case.  So, we create a
+           wide wrapper-div that _will_ have space available.  We position
+           that wrapper-div using a negative margin, so that centering in it
+           is equivalent to centering in our reference for the flex container.
+        -->
+      <div style="width: 100px; margin-right: -48px">
+        <div style="margin: auto; width: -moz-max-content">
+          <div class="center" style="margin-top: 4px">center</div>
+        </div>
+        <div style="margin: auto; width: -moz-max-content">
+          <div class="center big" style="margin-top: 4px">a b</div>
+        </div>
+      </div>
+    </div>
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big" style="margin-top: 4px">abc</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-vert-rtl-4.xhtml b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-4.xhtml
new file mode 100644
index 000000000000..528a809ab5a4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-vert-rtl-4.xhtml
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with the
+     flex container being skinnier than its items, and with "direction: rtl" to
+     swap the horizontal (cross) axis. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 4px;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+        direction: rtl;
+        float: left;
+        font-family: sans-serif;
+        font-size: 10px;
+        margin-left: 80px;
+      }
+
+      .flexbox > div {
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+
+        border-style: dotted;
+      }
+
+      div.big {
+        font-size: 18px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        -moz-align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        -moz-align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        -moz-align-self: center;
+      }
+      .baseline {
+        background: teal;
+        -moz-align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        -moz-align-self: stretch;
+      }
+   </style>
+  </head>
+  <body>
+    <!-- (NOTE: this test has the "stretch" divs and the "flex-end" divs
+         swapped in the ordering, with respect to the other
+         flexbox-align-self-* testcases.  That's because "stretch" and
+         "flex-end" overflow in opposite directions, and in RTL mode (with 2
+         flex containers side by side), they overflow *at* each other and
+         overlap. If we swap them, they float away from each other and we can
+         still see them.)  -->
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b</div>
+      <div class="center">center</div>
+      <div class="center big">a b</div>
+    </div>
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-block-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-block-horiz-1-ref.xhtml
new file mode 100644
index 000000000000..71c8f20ca3cb
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-block-horiz-1-ref.xhtml
@@ -0,0 +1,63 @@
+<?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>
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+      }
+      div.a {
+        display: inline-block;
+        background: lightgreen;
+      }
+      div.b {
+        display: inline-block;
+        background: yellow;
+      }
+      div.c {
+        display: inline-block;
+        background: orange;
+      }
+      div.auto   {
+        display: inline-block;
+        background: pink;
+      }
+      div.inflex {
+        display: inline-block;
+        background: gray;
+      }
+      div.spacer {
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="a" style="width: 80px"/><div class="b" style="width: 120px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="width: 62.5px"/><div class="c" style="width: 137.5px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="width: 185px"/><div class="auto">
+        <div class="spacer" style="width: 15px"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="width: 76px"/><div class="c" style="width: 124px"/>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="width: 170px"/><div class="auto">
+        <div class="spacer" style="width: 30px"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="width: 45px"/><div class="b" style="width: 50px"
+      /><div class="inflex" style="width: 20px"/><div class="c" style="width: 85px"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-block-horiz-1.xhtml b/layout/reftests/flexbox/flexbox-basic-block-horiz-1.xhtml
new file mode 100644
index 000000000000..6025fc1e7317
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-block-horiz-1.xhtml
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with blocks as flex items in a horizontal flex container, with
+     various "flex" values and various combinations of the items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        font-size: 10px;
+        display: -moz-flex;
+      }
+      div.a {
+        -moz-flex: 1 0 30px;
+        background: lightgreen;
+      }
+      div.b {
+        -moz-flex: 2 0 20px;
+        background: yellow;
+      }
+      div.c {
+        -moz-flex: 3 0 40px;
+        background: orange;
+      }
+      div.flexNone {
+        -moz-flex: none;
+        background: pink;
+      }
+      div.flexBasis {
+        -moz-flex: 0 0 20px;
+        background: gray;
+      }
+      div.spacer {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-block-vert-1-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-block-vert-1-ref.xhtml
new file mode 100644
index 000000000000..6e927001e59e
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-block-vert-1-ref.xhtml
@@ -0,0 +1,58 @@
+<?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>
+    <style>
+      div { width: 50px; }
+      div.flexbox {
+        border: 1px dashed blue;
+        float: left;
+      }
+      div.a {
+        background: lightgreen;
+      }
+      div.b {
+        background: yellow;
+      }
+      div.c {
+        background: orange;
+      }
+      div.auto   {
+        background: pink;
+      }
+      div.inflex {
+        background: gray;
+      }
+      div.spacer {
+        width: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="a" style="height: 80px"/><div class="b" style="height: 120px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="height: 62.5px"/><div class="c" style="height: 137.5px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="height: 185px"/><div class="auto">
+        <div class="spacer" style="height: 15px"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="height: 76px"/><div class="c" style="height: 124px"/>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="height: 170px"/><div class="auto">
+        <div class="spacer" style="height: 30px"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="height: 45px"/><div class="b" style="height: 50px"
+      /><div class="inflex" style="height: 20px"/><div class="c" style="height: 85px"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-block-vert-1.xhtml b/layout/reftests/flexbox/flexbox-basic-block-vert-1.xhtml
new file mode 100644
index 000000000000..3b7923a6c37e
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-block-vert-1.xhtml
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with blocks as flex items in a vertical flex container, with
+     various "flex" values and various combinations of the items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div { width: 50px; }
+      div.flexbox {
+        float: left;
+        border: 1px dashed blue;
+        height: 200px;
+        font-size: 10px;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+      }
+      div.a {
+        -moz-flex: 1 0 30px;
+        background: lightgreen;
+      }
+      div.b {
+        -moz-flex: 2 0 20px;
+        background: yellow;
+      }
+      div.c {
+        -moz-flex: 3 0 40px;
+        background: orange;
+      }
+      div.flexNone {
+        -moz-flex: none;
+        background: pink;
+      }
+      div.flexBasis {
+        -moz-flex: 0 0 20px;
+        background: gray;
+      }
+      div.spacer {
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-canvas-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-canvas-horiz-1-ref.xhtml
new file mode 100644
index 000000000000..fb5ef6cde9cc
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-canvas-horiz-1-ref.xhtml
@@ -0,0 +1,58 @@
+<?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>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      canvas {
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <canvas/>
+    </div>
+
+    <div class="flexbox" style="height: 22px">
+      some words
+      <canvas style="float:right"/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="width: 122.5px"
+    /><canvas style="width: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="width: 93px"
+    /><canvas style="width: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="width: 114px"
+    /><canvas style="width: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="width: 106px"
+    /><canvas style="width: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="width: 46px"
+    /><canvas style="width: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-canvas-horiz-1.xhtml b/layout/reftests/flexbox/flexbox-basic-canvas-horiz-1.xhtml
new file mode 100644
index 000000000000..7efb68e78d0b
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-canvas-horiz-1.xhtml
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that canvas elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        display: -moz-flex;
+        -moz-justify-content: space-between;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      canvas {
+        min-width: 0;
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <canvas/>
+    </div>
+
+    <!-- B) Text and a canvas (ensure they aren't merged into one flex item) -->
+    <div class="flexbox">
+      some words <canvas/>
+    </div>
+
+    <!-- C) Two canvas elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <canvas style="-moz-flex: 5"/>
+      <canvas style="-moz-flex: 3"/>
+    </div>
+
+    <!-- D) Two canvas elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <canvas style="width: 33px; -moz-flex: 2 auto"/>
+      <canvas style="width: 13px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <canvas style="width: 150px; -moz-flex: 1 4 auto"/>
+      <canvas style="width: 100px; -moz-flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-width -->
+    <!-- Same as (D), except we've added a max-width on the second element.
+      -->
+    <div class="flexbox">
+      <canvas style="width: 33px; -moz-flex: 2 auto"/>
+      <canvas style="width: 13px; max-width: 90px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-width -->
+    <!-- Same as (C), except we've added a min-width on the second element.
+      -->
+    <div class="flexbox">
+      <canvas style="width: 33px; -moz-flex: 2 auto"/>
+      <canvas style="width: 13px; min-width: 150px; -moz-flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-canvas-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-canvas-horiz-2-ref.xhtml
new file mode 100644
index 000000000000..38d6c71c48fc
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-canvas-horiz-2-ref.xhtml
@@ -0,0 +1,27 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+      }
+      canvas {
+        width: 50px;
+        height: 50px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <canvas/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-canvas-horiz-2.xhtml b/layout/reftests/flexbox/flexbox-basic-canvas-horiz-2.xhtml
new file mode 100644
index 000000000000..4d1c7f9c035f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-canvas-horiz-2.xhtml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that canvas elements' default "min-width: auto" property
+     is handled correctly (i.e. isn't influenced by the "width" property).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+      }
+      canvas {
+        width: 1000px;
+        height: 50px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <canvas/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-canvas-vert-1-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-canvas-vert-1-ref.xhtml
new file mode 100644
index 000000000000..fb85eba91d94
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-canvas-vert-1-ref.xhtml
@@ -0,0 +1,62 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 200px;
+        width: -moz-min-content;
+        float: left;
+        margin-right: 10px;
+        background: lightgreen;
+        line-height: 0;
+      }
+      canvas {
+        width: 20px;
+        height: 10px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <canvas/>
+    </div>
+
+    <div class="flexbox">
+      <div style="font: 8px monospace; height: 188px">
+        a b
+      </div>
+      <canvas/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="height: 122.5px"
+    /><canvas style="height: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="height: 93px"
+    /><canvas style="height: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="height: 114px"
+    /><canvas style="height: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="height: 106px"
+    /><canvas style="height: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="height: 46px"
+    /><canvas style="height: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-canvas-vert-1.xhtml b/layout/reftests/flexbox/flexbox-basic-canvas-vert-1.xhtml
new file mode 100644
index 000000000000..e10feaa3bb0b
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-canvas-vert-1.xhtml
@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that canvas elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 200px;
+        background: lightgreen;
+        display: -moz-flex;
+        -moz-justify-content: space-between;
+        -moz-flex-direction: column;
+        float: left;
+        margin-right: 10px;
+        font: 8px monospace;
+      }
+      canvas {
+        width: 20px;
+        height: 10px;
+        min-height: 0;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <canvas/>
+    </div>
+
+    <!-- B) Text and a canvas (ensure they aren't merged into one flex item) -->
+    <div class="flexbox">
+      a b <canvas/>
+    </div>
+
+    <!-- C) Two canvas elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <canvas style="-moz-flex: 5"/>
+      <canvas style="-moz-flex: 3"/>
+    </div>
+
+    <!-- D) Two canvas elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <canvas style="height: 33px; -moz-flex: 2 auto"/>
+      <canvas style="height: 13px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <canvas style="height: 150px; -moz-flex: 1 4 auto"/>
+      <canvas style="height: 100px; -moz-flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-height -->
+    <!-- Same as (D), except we've added a max-height on the second element.
+      -->
+    <div class="flexbox">
+      <canvas style="height: 33px; -moz-flex: 2 auto"/>
+      <canvas style="height: 13px; max-height: 90px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-height -->
+    <!-- Same as (C), except we've added a min-height on the second element.
+      -->
+    <div class="flexbox">
+      <canvas style="height: 33px; -moz-flex: 2 auto"/>
+      <canvas style="height: 13px; min-height: 150px; -moz-flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-canvas-vert-2-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-canvas-vert-2-ref.xhtml
new file mode 100644
index 000000000000..c34d9feb54eb
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-canvas-vert-2-ref.xhtml
@@ -0,0 +1,28 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+      }
+      canvas {
+        width: 50px;
+        height: 50px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <canvas/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-canvas-vert-2.xhtml b/layout/reftests/flexbox/flexbox-basic-canvas-vert-2.xhtml
new file mode 100644
index 000000000000..57e16a4ffc75
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-canvas-vert-2.xhtml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that canvas elements' default "min-height: auto" property
+     is handled correctly (i.e. isn't influenced by the "height" property).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+      }
+      canvas {
+        width: 50px;
+        height: 1000px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <canvas/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-fieldset-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-fieldset-horiz-1-ref.xhtml
new file mode 100644
index 000000000000..c4daa393d3fe
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-fieldset-horiz-1-ref.xhtml
@@ -0,0 +1,63 @@
+<?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>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        margin-bottom: 5px;
+        line-height: 8px;
+        clear: all;
+        height: 22px;
+      }
+      fieldset {
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+        margin: 0;
+        padding: 0;
+        float: left;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <fieldset/>
+    </div>
+
+    <div class="flexbox" style="height: 22px">
+      some words
+      <fieldset style="float:right"/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="width: 122.5px"
+    /><fieldset style="width: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="width: 93px"
+    /><fieldset style="width: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="width: 114px"
+    /><fieldset style="width: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="width: 106px"
+    /><fieldset style="width: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="width: 46px"
+    /><fieldset style="width: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-fieldset-horiz-1.xhtml b/layout/reftests/flexbox/flexbox-basic-fieldset-horiz-1.xhtml
new file mode 100644
index 000000000000..375c7c2660c1
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-fieldset-horiz-1.xhtml
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that fieldset elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        display: -moz-flex;
+        -moz-justify-content: space-between;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      fieldset {
+        min-width: 0;
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <fieldset/>
+    </div>
+
+    <!-- B) Text and a fieldset (ensure they aren't merged into one flex item)
+      -->
+    <div class="flexbox">
+      some words <fieldset/>
+    </div>
+
+    <!-- C) Two fieldset elements, getting stretched by different ratios,
+         from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <fieldset style="-moz-flex: 5"/>
+      <fieldset style="-moz-flex: 3"/>
+    </div>
+
+    <!-- D) Two fieldset elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <fieldset style="width: 33px; -moz-flex: 2 auto"/>
+      <fieldset style="width: 13px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <fieldset style="width: 150px; -moz-flex: 1 4 auto"/>
+      <fieldset style="width: 100px; -moz-flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-width -->
+    <!-- Same as (D), except we've added a max-width on the second element.
+      -->
+    <div class="flexbox">
+      <fieldset style="width: 33px; -moz-flex: 2 auto"/>
+      <fieldset style="width: 13px; max-width: 90px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-width -->
+    <!-- Same as (C), except we've added a min-width on the second element.
+      -->
+    <div class="flexbox">
+      <fieldset style="width: 33px; -moz-flex: 2 auto"/>
+      <fieldset style="width: 13px; min-width: 150px; -moz-flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-fieldset-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-fieldset-horiz-2-ref.xhtml
new file mode 100644
index 000000000000..7bc050a92f87
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-fieldset-horiz-2-ref.xhtml
@@ -0,0 +1,27 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+      }
+      fieldset {
+        width: 50px;
+        height: 50px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <fieldset/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-fieldset-horiz-2.xhtml b/layout/reftests/flexbox/flexbox-basic-fieldset-horiz-2.xhtml
new file mode 100644
index 000000000000..f06f37449994
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-fieldset-horiz-2.xhtml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that fieldset elements' default "min-width: auto" property
+     is handled correctly (i.e. isn't influenced by the "width" property).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+      }
+      fieldset {
+        width: 1000px;
+        height: 50px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <fieldset/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-fieldset-vert-1-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-fieldset-vert-1-ref.xhtml
new file mode 100644
index 000000000000..19453984ed18
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-fieldset-vert-1-ref.xhtml
@@ -0,0 +1,64 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 200px;
+        width: -moz-min-content;
+        float: left;
+        margin-right: 10px;
+        background: lightgreen;
+        line-height: 0;
+      }
+      fieldset {
+        width: 20px;
+        height: 10px;
+        border: 1px dotted green;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <fieldset/>
+    </div>
+
+    <div class="flexbox">
+      <div style="font: 8px monospace; height: 188px">
+        a b
+      </div>
+      <fieldset/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="height: 122.5px"
+    /><fieldset style="height: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="height: 93px"
+    /><fieldset style="height: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="height: 114px"
+    /><fieldset style="height: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="height: 106px"
+    /><fieldset style="height: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="height: 46px"
+    /><fieldset style="height: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-fieldset-vert-1.xhtml b/layout/reftests/flexbox/flexbox-basic-fieldset-vert-1.xhtml
new file mode 100644
index 000000000000..630e7c8eae3f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-fieldset-vert-1.xhtml
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that fieldset elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 200px;
+        background: lightgreen;
+        display: -moz-flex;
+        -moz-justify-content: space-between;
+        -moz-flex-direction: column;
+        float: left;
+        margin-right: 10px;
+        font: 8px monospace;
+      }
+      fieldset {
+        width: 20px;
+        height: 10px;
+        min-height: 0;
+        border: 1px dotted green;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <fieldset/>
+    </div>
+
+    <!-- B) Text and a fieldset (ensure they aren't merged into one flex item)
+      -->
+    <div class="flexbox">
+      a b <fieldset/>
+    </div>
+
+    <!-- C) Two fieldset elements, getting stretched by different ratios,
+         from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <fieldset style="-moz-flex: 5"/>
+      <fieldset style="-moz-flex: 3"/>
+    </div>
+
+    <!-- D) Two fieldset elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <fieldset style="height: 33px; -moz-flex: 2 auto"/>
+      <fieldset style="height: 13px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <fieldset style="height: 150px; -moz-flex: 1 4 auto"/>
+      <fieldset style="height: 100px; -moz-flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-height -->
+    <!-- Same as (D), except we've added a max-height on the second element.
+      -->
+    <div class="flexbox">
+      <fieldset style="height: 33px; -moz-flex: 2 auto"/>
+      <fieldset style="height: 13px; max-height: 90px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-height -->
+    <!-- Same as (C), except we've added a min-height on the second element.
+      -->
+    <div class="flexbox">
+      <fieldset style="height: 33px; -moz-flex: 2 auto"/>
+      <fieldset style="height: 13px; min-height: 150px; -moz-flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-fieldset-vert-2-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-fieldset-vert-2-ref.xhtml
new file mode 100644
index 000000000000..b025d7fb55b7
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-fieldset-vert-2-ref.xhtml
@@ -0,0 +1,28 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+      }
+      fieldset {
+        width: 50px;
+        height: 50px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <fieldset/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-fieldset-vert-2.xhtml b/layout/reftests/flexbox/flexbox-basic-fieldset-vert-2.xhtml
new file mode 100644
index 000000000000..36d0b74a18f5
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-fieldset-vert-2.xhtml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that fieldset elements' default "min-height: auto"
+     property is handled correctly (i.e. isn't influenced by the "height"
+     property).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+      }
+      fieldset {
+        width: 50px;
+        height: 1000px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <fieldset/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-iframe-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-iframe-horiz-1-ref.xhtml
new file mode 100644
index 000000000000..a3a93e67f69a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-iframe-horiz-1-ref.xhtml
@@ -0,0 +1,58 @@
+<?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>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      iframe {
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <iframe/>
+    </div>
+
+    <div class="flexbox" style="height: 22px">
+      some words
+      <iframe style="float:right"/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="width: 122.5px"
+    /><iframe style="width: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="width: 93px"
+    /><iframe style="width: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="width: 114px"
+    /><iframe style="width: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="width: 106px"
+    /><iframe style="width: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="width: 46px"
+    /><iframe style="width: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-iframe-horiz-1.xhtml b/layout/reftests/flexbox/flexbox-basic-iframe-horiz-1.xhtml
new file mode 100644
index 000000000000..cd463c751060
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-iframe-horiz-1.xhtml
@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that iframe elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        display: -moz-flex;
+        -moz-justify-content: space-between;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      iframe {
+        min-width: 0;
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <iframe/>
+    </div>
+
+    <!-- B) Text and an iframe (ensure they aren't merged into one flex item)
+      -->
+    <div class="flexbox">
+      some words <iframe/>
+    </div>
+
+    <!-- C) Two iframe elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <iframe style="-moz-flex: 5"/>
+      <iframe style="-moz-flex: 3"/>
+    </div>
+
+    <!-- D) Two iframe elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <iframe style="width: 33px; -moz-flex: 2 auto"/>
+      <iframe style="width: 13px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <iframe style="width: 150px; -moz-flex: 1 4 auto"/>
+      <iframe style="width: 100px; -moz-flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-width -->
+    <!-- Same as (D), except we've added a max-width on the second element.
+      -->
+    <div class="flexbox">
+      <iframe style="width: 33px; -moz-flex: 2 auto"/>
+      <iframe style="width: 13px; max-width: 90px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-width -->
+    <!-- Same as (C), except we've added a min-width on the second element.
+      -->
+    <div class="flexbox">
+      <iframe style="width: 33px; -moz-flex: 2 auto"/>
+      <iframe style="width: 13px; min-width: 150px; -moz-flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-iframe-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-iframe-horiz-2-ref.xhtml
new file mode 100644
index 000000000000..610bf030b69c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-iframe-horiz-2-ref.xhtml
@@ -0,0 +1,27 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+      }
+      iframe {
+        width: 50px;
+        height: 50px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <iframe/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-iframe-horiz-2.xhtml b/layout/reftests/flexbox/flexbox-basic-iframe-horiz-2.xhtml
new file mode 100644
index 000000000000..87f0c7fc1c21
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-iframe-horiz-2.xhtml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that iframe elements' default "min-width: auto" property
+     is handled correctly (i.e. isn't influenced by the "width" property).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+      }
+      iframe {
+        width: 1000px;
+        height: 50px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <iframe/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-iframe-vert-1-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-iframe-vert-1-ref.xhtml
new file mode 100644
index 000000000000..8004a1c905ec
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-iframe-vert-1-ref.xhtml
@@ -0,0 +1,62 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 200px;
+        width: -moz-min-content;
+        float: left;
+        margin-right: 10px;
+        background: lightgreen;
+        line-height: 0;
+      }
+      iframe {
+        width: 20px;
+        height: 10px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <iframe/>
+    </div>
+
+    <div class="flexbox">
+      <div style="font: 8px monospace; height: 188px">
+        a b
+      </div>
+      <iframe/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="height: 122.5px"
+    /><iframe style="height: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="height: 93px"
+    /><iframe style="height: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="height: 114px"
+    /><iframe style="height: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="height: 106px"
+    /><iframe style="height: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="height: 46px"
+    /><iframe style="height: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-iframe-vert-1.xhtml b/layout/reftests/flexbox/flexbox-basic-iframe-vert-1.xhtml
new file mode 100644
index 000000000000..ca3c59ab2287
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-iframe-vert-1.xhtml
@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that iframe elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 200px;
+        background: lightgreen;
+        display: -moz-flex;
+        -moz-justify-content: space-between;
+        -moz-flex-direction: column;
+        float: left;
+        margin-right: 10px;
+        font: 8px monospace;
+      }
+      iframe {
+        width: 20px;
+        height: 10px;
+        min-height: 0;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <iframe/>
+    </div>
+
+    <!-- B) Text and an iframe (ensure they aren't merged into one flex item)
+      -->
+    <div class="flexbox">
+      a b <iframe/>
+    </div>
+
+    <!-- C) Two iframe elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <iframe style="-moz-flex: 5"/>
+      <iframe style="-moz-flex: 3"/>
+    </div>
+
+    <!-- D) Two iframe elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <iframe style="height: 33px; -moz-flex: 2 auto"/>
+      <iframe style="height: 13px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <iframe style="height: 150px; -moz-flex: 1 4 auto"/>
+      <iframe style="height: 100px; -moz-flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-height -->
+    <!-- Same as (D), except we've added a max-height on the second element.
+      -->
+    <div class="flexbox">
+      <iframe style="height: 33px; -moz-flex: 2 auto"/>
+      <iframe style="height: 13px; max-height: 90px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-height -->
+    <!-- Same as (C), except we've added a min-height on the second element.
+      -->
+    <div class="flexbox">
+      <iframe style="height: 33px; -moz-flex: 2 auto"/>
+      <iframe style="height: 13px; min-height: 150px; -moz-flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-iframe-vert-2-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-iframe-vert-2-ref.xhtml
new file mode 100644
index 000000000000..72f4b3464623
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-iframe-vert-2-ref.xhtml
@@ -0,0 +1,28 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+      }
+      iframe {
+        width: 50px;
+        height: 50px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <iframe/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-iframe-vert-2.xhtml b/layout/reftests/flexbox/flexbox-basic-iframe-vert-2.xhtml
new file mode 100644
index 000000000000..25f491b89575
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-iframe-vert-2.xhtml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that iframe elements' default "min-height: auto" property
+     is handled correctly (i.e. isn't influenced by the "height" property).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+      }
+      iframe {
+        width: 50px;
+        height: 1000px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <iframe/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-img-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-img-horiz-1-ref.xhtml
new file mode 100644
index 000000000000..fb63982e6f19
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-img-horiz-1-ref.xhtml
@@ -0,0 +1,58 @@
+<?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>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      img {
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <img src="solidblue.png"/>
+    </div>
+
+    <div class="flexbox" style="height: 22px">
+      some words
+      <img src="solidblue.png" style="float:right"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="solidblue.png" style="width: 122.5px"
+    /><img src="solidblue.png" style="width: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="solidblue.png" style="width: 93px"
+    /><img src="solidblue.png" style="width: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="solidblue.png" style="width: 114px"
+    /><img src="solidblue.png" style="width: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="solidblue.png" style="width: 106px"
+    /><img src="solidblue.png" style="width: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="solidblue.png" style="width: 46px"
+    /><img src="solidblue.png" style="width: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-img-horiz-1.xhtml b/layout/reftests/flexbox/flexbox-basic-img-horiz-1.xhtml
new file mode 100644
index 000000000000..9c5d7f0605df
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-img-horiz-1.xhtml
@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that img elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        display: -moz-flex;
+        -moz-justify-content: space-between;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      img {
+        min-width: 0;
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <img src="solidblue.png"/>
+    </div>
+
+    <!-- B) Text and an img (ensure they aren't merged into one flex item) -->
+    <div class="flexbox">
+      some words <img src="solidblue.png"/>
+    </div>
+
+    <!-- C) Two img elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <img src="solidblue.png" style="-moz-flex: 5"/>
+      <img src="solidblue.png" style="-moz-flex: 3"/>
+    </div>
+
+    <!-- D) Two img elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <img src="solidblue.png" style="width: 33px; -moz-flex: 2 auto"/>
+      <img src="solidblue.png" style="width: 13px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <img src="solidblue.png" style="width: 150px; -moz-flex: 1 4 auto"/>
+      <img src="solidblue.png" style="width: 100px; -moz-flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-width -->
+    <!-- Same as (D), except we've added a max-width on the second element.
+      -->
+    <div class="flexbox">
+      <img src="solidblue.png" style="width: 33px; -moz-flex: 2 auto"/>
+      <img src="solidblue.png"
+           style="width: 13px; max-width: 90px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-width -->
+    <!-- Same as (C), except we've added a min-width on the second element.
+      -->
+    <div class="flexbox">
+      <img src="solidblue.png" style="width: 33px; -moz-flex: 2 auto"/>
+      <img src="solidblue.png"
+           style="width: 13px; min-width: 150px; -moz-flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-img-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-img-horiz-2-ref.xhtml
new file mode 100644
index 000000000000..b2e73a004e7c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-img-horiz-2-ref.xhtml
@@ -0,0 +1,27 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+      }
+      img {
+        width: 50px;
+        height: 50px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <img src="solidblue.png"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-img-horiz-2.xhtml b/layout/reftests/flexbox/flexbox-basic-img-horiz-2.xhtml
new file mode 100644
index 000000000000..d941a01368f3
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-img-horiz-2.xhtml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that img elements' default "min-width: auto" property
+     is handled correctly (i.e. isn't influenced by the "width" property).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+      }
+      img {
+        width: 1000px;
+        height: 50px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <img src="solidblue.png"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-img-vert-1-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-img-vert-1-ref.xhtml
new file mode 100644
index 000000000000..84417ecf3097
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-img-vert-1-ref.xhtml
@@ -0,0 +1,62 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 200px;
+        width: -moz-min-content;
+        float: left;
+        margin-right: 10px;
+        background: lightgreen;
+        line-height: 0;
+      }
+      img {
+        width: 20px;
+        height: 10px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <img src="solidblue.png"/>
+    </div>
+
+    <div class="flexbox">
+      <div style="font: 8px monospace; height: 188px">
+        a b
+      </div>
+      <img src="solidblue.png"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="solidblue.png" style="height: 122.5px"
+    /><img src="solidblue.png" style="height: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="solidblue.png" style="height: 93px"
+    /><img src="solidblue.png" style="height: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="solidblue.png" style="height: 114px"
+    /><img src="solidblue.png" style="height: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="solidblue.png" style="height: 106px"
+    /><img src="solidblue.png" style="height: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="solidblue.png" style="height: 46px"
+    /><img src="solidblue.png" style="height: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-img-vert-1.xhtml b/layout/reftests/flexbox/flexbox-basic-img-vert-1.xhtml
new file mode 100644
index 000000000000..ea71d0bb27c3
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-img-vert-1.xhtml
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that img elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 200px;
+        background: lightgreen;
+        display: -moz-flex;
+        -moz-justify-content: space-between;
+        -moz-flex-direction: column;
+        float: left;
+        margin-right: 10px;
+        font: 8px monospace;
+      }
+      img {
+        width: 20px;
+        height: 10px;
+        min-height: 0;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <img src="solidblue.png"/>
+    </div>
+
+    <!-- B) Text and an img (ensure they aren't merged into one flex item) -->
+    <div class="flexbox">
+      a b <img src="solidblue.png"/>
+    </div>
+
+    <!-- C) Two img elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <img src="solidblue.png" style="-moz-flex: 5"/>
+      <img src="solidblue.png" style="-moz-flex: 3"/>
+    </div>
+
+    <!-- D) Two img elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <img src="solidblue.png" style="height: 33px; -moz-flex: 2 auto"/>
+      <img src="solidblue.png" style="height: 13px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <img src="solidblue.png" style="height: 150px; -moz-flex: 1 4 auto"/>
+      <img src="solidblue.png" style="height: 100px; -moz-flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-height -->
+    <!-- Same as (D), except we've added a max-height on the second element.
+      -->
+    <div class="flexbox">
+      <img src="solidblue.png" style="height: 33px; -moz-flex: 2 auto"/>
+      <img src="solidblue.png"
+           style="height: 13px; max-height: 90px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-height -->
+    <!-- Same as (C), except we've added a min-height on the second element.
+      -->
+    <div class="flexbox">
+      <img src="solidblue.png" style="height: 33px; -moz-flex: 2 auto"/>
+      <img src="solidblue.png"
+           style="height: 13px; min-height: 150px; -moz-flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-img-vert-2-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-img-vert-2-ref.xhtml
new file mode 100644
index 000000000000..8b0b39c5cae9
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-img-vert-2-ref.xhtml
@@ -0,0 +1,28 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+      }
+      img {
+        width: 50px;
+        height: 50px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <img src="solidblue.png"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-img-vert-2.xhtml b/layout/reftests/flexbox/flexbox-basic-img-vert-2.xhtml
new file mode 100644
index 000000000000..eb2b6f2dd318
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-img-vert-2.xhtml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that img elements' default "min-height: auto" property
+     is handled correctly (i.e. isn't influenced by the "height" property).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+      }
+      img {
+        width: 50px;
+        height: 1000px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <img src="solidblue.png"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-textarea-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-textarea-horiz-1-ref.xhtml
new file mode 100644
index 000000000000..3a6b22b3f8e1
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-textarea-horiz-1-ref.xhtml
@@ -0,0 +1,61 @@
+<?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>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      textarea {
+        width: 10px;
+        height: 20px;
+        background: white;
+        border-radius: 0;
+        border: 1px dotted green;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <textarea/>
+    </div>
+
+    <div class="flexbox" style="height: 24px">
+      some words
+      <textarea style="float:right"/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="width: 122.5px"
+    /><textarea style="width: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="width: 93px"
+    /><textarea style="width: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="width: 114px"
+    /><textarea style="width: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="width: 106px"
+    /><textarea style="width: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="width: 46px"
+    /><textarea style="width: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-textarea-horiz-1.xhtml b/layout/reftests/flexbox/flexbox-basic-textarea-horiz-1.xhtml
new file mode 100644
index 000000000000..33fa73bb0d59
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-textarea-horiz-1.xhtml
@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that textarea elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        display: -moz-flex;
+        -moz-justify-content: space-between;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      textarea {
+        min-width: 0;
+        width: 10px;
+        height: 20px;
+        background: white;
+        border-radius: 0;
+        border: 1px dotted green;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <textarea/>
+    </div>
+
+    <!-- B) Text and a textarea (ensure they aren't merged into one flex item)
+      -->
+    <div class="flexbox">
+      some words <textarea/>
+    </div>
+
+    <!-- C) Two textarea elements, getting stretched by different ratios,
+         from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <textarea style="-moz-flex: 5"/>
+      <textarea style="-moz-flex: 3"/>
+    </div>
+
+    <!-- D) Two textarea elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <textarea style="width: 33px; -moz-flex: 2 auto"/>
+      <textarea style="width: 13px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <textarea style="width: 150px; -moz-flex: 1 4 auto"/>
+      <textarea style="width: 100px; -moz-flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-width -->
+    <!-- Same as (D), except we've added a max-width on the second element.
+      -->
+    <div class="flexbox">
+      <textarea style="width: 33px; -moz-flex: 2 auto"/>
+      <textarea
+         style="width: 13px; max-width: 90px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-width -->
+    <!-- Same as (C), except we've added a min-width on the second element.
+      -->
+    <div class="flexbox">
+      <textarea style="width: 33px; -moz-flex: 2 auto"/>
+      <textarea
+         style="width: 13px; min-width: 150px; -moz-flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-textarea-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-textarea-horiz-2-ref.xhtml
new file mode 100644
index 000000000000..8bd164977f28
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-textarea-horiz-2-ref.xhtml
@@ -0,0 +1,27 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+      }
+      textarea {
+        width: 50px;
+        height: 50px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <textarea/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-textarea-horiz-2.xhtml b/layout/reftests/flexbox/flexbox-basic-textarea-horiz-2.xhtml
new file mode 100644
index 000000000000..099b7711cf40
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-textarea-horiz-2.xhtml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that textarea elements' default "min-width: auto" property
+     is handled correctly (i.e. isn't influenced by the "width" property).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+      }
+      textarea {
+        width: 1000px;
+        height: 50px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <textarea/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-textarea-vert-1-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-textarea-vert-1-ref.xhtml
new file mode 100644
index 000000000000..e0c68e2bcfdc
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-textarea-vert-1-ref.xhtml
@@ -0,0 +1,66 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 200px;
+        width: -moz-min-content;
+        float: left;
+        margin-right: 10px;
+        background: lightgreen;
+        line-height: 0;
+      }
+      textarea {
+        width: 20px;
+        height: 10px;
+        background: white;
+        border-radius: 0;
+        border: 1px dotted green;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <textarea/>
+    </div>
+
+    <div class="flexbox">
+      <div style="font: 8px monospace; height: 188px">
+        a b
+      </div>
+      <textarea/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="height: 122.5px"
+    /><textarea style="height: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="height: 93px"
+    /><textarea style="height: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="height: 114px"
+    /><textarea style="height: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="height: 106px"
+    /><textarea style="height: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="height: 46px"
+    /><textarea style="height: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-textarea-vert-1.xhtml b/layout/reftests/flexbox/flexbox-basic-textarea-vert-1.xhtml
new file mode 100644
index 000000000000..61b918e180bf
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-textarea-vert-1.xhtml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that textarea elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 200px;
+        background: lightgreen;
+        display: -moz-flex;
+        -moz-justify-content: space-between;
+        -moz-flex-direction: column;
+        float: left;
+        margin-right: 10px;
+        font: 8px monospace;
+      }
+      textarea {
+        width: 20px;
+        height: 10px;
+        min-height: 0;
+        background: white;
+        border-radius: 0;
+        border: 1px dotted green;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <textarea/>
+    </div>
+
+    <!-- B) Text and a textarea (ensure they aren't merged into one flex item)
+      -->
+    <div class="flexbox">
+      a b <textarea/>
+    </div>
+
+    <!-- C) Two textarea elements, getting stretched by different ratios,
+         from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <textarea style="-moz-flex: 5"/>
+      <textarea style="-moz-flex: 3"/>
+    </div>
+
+    <!-- D) Two textarea elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <textarea style="height: 33px; -moz-flex: 2 auto"/>
+      <textarea style="height: 13px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <textarea style="height: 150px; -moz-flex: 1 4 auto"/>
+      <textarea style="height: 100px; -moz-flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-height -->
+    <!-- Same as (D), except we've added a max-height on the second element.
+      -->
+    <div class="flexbox">
+      <textarea style="height: 33px; -moz-flex: 2 auto"/>
+      <textarea
+         style="height: 13px; max-height: 90px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-height -->
+    <!-- Same as (C), except we've added a min-height on the second element.
+      -->
+    <div class="flexbox">
+      <textarea style="height: 33px; -moz-flex: 2 auto"/>
+      <textarea
+         style="height: 13px; min-height: 150px; -moz-flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-textarea-vert-2-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-textarea-vert-2-ref.xhtml
new file mode 100644
index 000000000000..5651329c5172
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-textarea-vert-2-ref.xhtml
@@ -0,0 +1,28 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+      }
+      textarea {
+        width: 50px;
+        height: 50px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <textarea/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-textarea-vert-2.xhtml b/layout/reftests/flexbox/flexbox-basic-textarea-vert-2.xhtml
new file mode 100644
index 000000000000..dc200c404a7d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-textarea-vert-2.xhtml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that textarea elements' default "min-height: auto"
+     property is handled correctly (i.e. isn't influenced by the "height"
+     property).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+      }
+      textarea {
+        width: 50px;
+        height: 1000px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <textarea/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-video-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-video-horiz-1-ref.xhtml
new file mode 100644
index 000000000000..9f7988322398
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-video-horiz-1-ref.xhtml
@@ -0,0 +1,58 @@
+<?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>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      video {
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <video/>
+    </div>
+
+    <div class="flexbox" style="height: 22px">
+      some words
+      <video style="float:right"/>
+    </div>
+
+    <div class="flexbox">
+      <video style="width: 122.5px"
+    /><video style="width: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <video style="width: 93px"
+    /><video style="width: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <video style="width: 114px"
+    /><video style="width: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <video style="width: 106px"
+    /><video style="width: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <video style="width: 46px"
+    /><video style="width: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-video-horiz-1.xhtml b/layout/reftests/flexbox/flexbox-basic-video-horiz-1.xhtml
new file mode 100644
index 000000000000..d99871b0c9ef
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-video-horiz-1.xhtml
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that video elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        display: -moz-flex;
+        -moz-justify-content: space-between;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      video {
+        min-width: 0;
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <video/>
+    </div>
+
+    <!-- B) Text and a video (ensure they aren't merged into one flex item) -->
+    <div class="flexbox">
+      some words <video/>
+    </div>
+
+    <!-- C) Two video elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <video style="-moz-flex: 5"/>
+      <video style="-moz-flex: 3"/>
+    </div>
+
+    <!-- D) Two video elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <video style="width: 33px; -moz-flex: 2 auto"/>
+      <video style="width: 13px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <video style="width: 150px; -moz-flex: 1 4 auto"/>
+      <video style="width: 100px; -moz-flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-width -->
+    <!-- Same as (D), except we've added a max-width on the second element.
+      -->
+    <div class="flexbox">
+      <video style="width: 33px; -moz-flex: 2 auto"/>
+      <video style="width: 13px; max-width: 90px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-width -->
+    <!-- Same as (C), except we've added a min-width on the second element.
+      -->
+    <div class="flexbox">
+      <video style="width: 33px; -moz-flex: 2 auto"/>
+      <video style="width: 13px; min-width: 150px; -moz-flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-video-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-video-horiz-2-ref.xhtml
new file mode 100644
index 000000000000..56c6d625de5d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-video-horiz-2-ref.xhtml
@@ -0,0 +1,27 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+      }
+      video {
+        width: 50px;
+        height: 50px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <video/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-video-horiz-2.xhtml b/layout/reftests/flexbox/flexbox-basic-video-horiz-2.xhtml
new file mode 100644
index 000000000000..0e9c4946e327
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-video-horiz-2.xhtml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that video elements' default "min-width: auto" property
+     is handled correctly (i.e. isn't influenced by the "width" property).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+      }
+      video {
+        width: 1000px;
+        height: 50px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <video/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-video-vert-1-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-video-vert-1-ref.xhtml
new file mode 100644
index 000000000000..4691503a9a54
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-video-vert-1-ref.xhtml
@@ -0,0 +1,62 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 200px;
+        width: -moz-min-content;
+        float: left;
+        margin-right: 10px;
+        background: lightgreen;
+        line-height: 0;
+      }
+      video {
+        width: 20px;
+        height: 10px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <video/>
+    </div>
+
+    <div class="flexbox">
+      <div style="font: 8px monospace; height: 188px">
+        a b
+      </div>
+      <video/>
+    </div>
+
+    <div class="flexbox">
+      <video style="height: 122.5px"
+    /><video style="height: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <video style="height: 93px"
+    /><video style="height: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <video style="height: 114px"
+    /><video style="height: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <video style="height: 106px"
+    /><video style="height: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <video style="height: 46px"
+    /><video style="height: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-video-vert-1.xhtml b/layout/reftests/flexbox/flexbox-basic-video-vert-1.xhtml
new file mode 100644
index 000000000000..2083b7f0ae9d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-video-vert-1.xhtml
@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that video elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 200px;
+        background: lightgreen;
+        display: -moz-flex;
+        -moz-justify-content: space-between;
+        -moz-flex-direction: column;
+        float: left;
+        margin-right: 10px;
+        font: 8px monospace;
+      }
+      video {
+        width: 20px;
+        height: 10px;
+        min-height: 0;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <video/>
+    </div>
+
+    <!-- B) Text and a video (ensure they aren't merged into one flex item) -->
+    <div class="flexbox">
+      a b <video/>
+    </div>
+
+    <!-- C) Two video elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <video style="-moz-flex: 5"/>
+      <video style="-moz-flex: 3"/>
+    </div>
+
+    <!-- D) Two video elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <video style="height: 33px; -moz-flex: 2 auto"/>
+      <video style="height: 13px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <video style="height: 150px; -moz-flex: 1 4 auto"/>
+      <video style="height: 100px; -moz-flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-height -->
+    <!-- Same as (D), except we've added a max-height on the second element.
+      -->
+    <div class="flexbox">
+      <video style="height: 33px; -moz-flex: 2 auto"/>
+      <video style="height: 13px; max-height: 90px; -moz-flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-height -->
+    <!-- Same as (C), except we've added a min-height on the second element.
+      -->
+    <div class="flexbox">
+      <video style="height: 33px; -moz-flex: 2 auto"/>
+      <video style="height: 13px; min-height: 150px; -moz-flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-video-vert-2-ref.xhtml b/layout/reftests/flexbox/flexbox-basic-video-vert-2-ref.xhtml
new file mode 100644
index 000000000000..e43011cdb83e
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-video-vert-2-ref.xhtml
@@ -0,0 +1,28 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+      }
+      video {
+        width: 50px;
+        height: 50px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <video/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-basic-video-vert-2.xhtml b/layout/reftests/flexbox/flexbox-basic-video-vert-2.xhtml
new file mode 100644
index 000000000000..884b697890bb
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-basic-video-vert-2.xhtml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that video elements' default "min-height: auto" property
+     is handled correctly (i.e. isn't influenced by the "height" property).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 50px;
+        width: 50px;
+        border: 2px dotted black;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+      }
+      video {
+        width: 50px;
+        height: 1000px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <video/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1-ref.xhtml
new file mode 100644
index 000000000000..621130eea819
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1-ref.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This reference case is like its textcase, but with the testcase's dynamic
+     modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      body { font-size: 10px; }
+
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 300px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+        margin-bottom: 1px;
+        white-space: pre;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox" id="f0">  <div>[OldText]</div></div>
+    <div class="flexbox" id="f1"><div>[OldText]</div>  </div>
+    <div class="flexbox" id="f2">[NewText]<div>[OldText]</div></div>
+    <div class="flexbox" id="f3">[NewText]  <div>[OldText]</div></div>
+    <div class="flexbox" id="f4">  [NewText]<div>[OldText]</div></div>
+    <div class="flexbox" id="f5"><div>[OldText]</div>[NewText]</div>
+    <div class="flexbox" id="f6"><div>[OldText]</div>[NewText]  </div>
+    <div class="flexbox" id="f7"><div>[OldText]</div>  [NewText]</div>
+    <div class="flexbox" id="f8">[NewText]  <div>[OldText]</div></div>
+    <div class="flexbox" id="f9">  [NewText]<div>[OldText]</div></div>
+    <div class="flexbox" id="f10"><div>[OldText]</div>[NewText]  </div>
+    <div class="flexbox" id="f11"><div>[OldText]</div>  [NewText]</div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.xhtml
new file mode 100644
index 000000000000..52d3c070dd20
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.xhtml
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that we reconstruct frames as necessary, after content
+     (including whitespace & text) is dynamically inserted as a child of a
+     flexbox.  (Note that in cases where we know the whitespace is going to be
+     dropped, we don't bother reconstructing frames. This test is to be sure we
+     aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <style>
+      body { font-size: 10px; }
+
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 300px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+        margin-bottom: 1px;
+        white-space: pre;
+      }
+    </style>
+    <script>
+      function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+        var parent = document.getElementById(aParentId);
+        var insertBeforeTarget = parent.firstChild;
+        for (var i = 0; i &lt; aPosn; i++) {
+          insertBeforeTarget = insertBeforeTarget.nextSibling;
+        }
+        parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+      }
+
+      function tweak() {
+        // Just inserting whitespace
+        // -------------------------
+        insertNodeAtPosnInElem(document.createTextNode("  "), 0, "f0");
+        insertNodeAtPosnInElem(document.createTextNode("  "), 1, "f1");
+
+        // Inserting text or text with whitespace
+        // --------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"),   0, "f2");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]  "), 0, "f3");
+        insertNodeAtPosnInElem(document.createTextNode("  [NewText]"), 0, "f4");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"),   1, "f5");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]  "), 1, "f6");
+        insertNodeAtPosnInElem(document.createTextNode("  [NewText]"), 1, "f7");
+
+        // Same as the whitespace cases immediately above, but now with separate
+        // text nodes for the whitespace vs. the text
+        insertNodeAtPosnInElem(document.createTextNode("  "),        0, "f8");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f8");
+
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f9");
+        insertNodeAtPosnInElem(document.createTextNode("  "),        0, "f9");
+
+        insertNodeAtPosnInElem(document.createTextNode("  "),        1, "f10");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f10");
+
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f11");
+        insertNodeAtPosnInElem(document.createTextNode("  "),        1, "f11");
+
+        document.documentElement.removeAttribute("class");
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+  </head>
+  <body>
+    <div class="flexbox" id="f0"><div>[OldText]</div></div>
+    <div class="flexbox" id="f1"><div>[OldText]</div></div>
+    <div class="flexbox" id="f2"><div>[OldText]</div></div>
+    <div class="flexbox" id="f3"><div>[OldText]</div></div>
+    <div class="flexbox" id="f4"><div>[OldText]</div></div>
+    <div class="flexbox" id="f5"><div>[OldText]</div></div>
+    <div class="flexbox" id="f6"><div>[OldText]</div></div>
+    <div class="flexbox" id="f7"><div>[OldText]</div></div>
+    <div class="flexbox" id="f8"><div>[OldText]</div></div>
+    <div class="flexbox" id="f9"><div>[OldText]</div></div>
+    <div class="flexbox" id="f10"><div>[OldText]</div></div>
+    <div class="flexbox" id="f11"><div>[OldText]</div></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2-ref.xhtml
new file mode 100644
index 000000000000..36fead9450ba
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2-ref.xhtml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This reference case is like its textcase, but with the testcase's dynamic
+     modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      body { font-size: 10px; }
+
+      <!-- to make inserted div elements stand out -->
+      div.inserted { background: teal; }
+
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 300px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+        margin-bottom: 1px;
+        white-space: pre;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox" id="f8"><div class="inserted">[NewDiv]</div><div>[OldText]</div></div>
+    <div class="flexbox" id="f9"><div>[OldText]</div><div class="inserted">[NewDiv]</div></div>
+    <div class="flexbox" id="f10"><div class="inserted">[NewDiv]</div>  <div>[OldText]</div></div>
+    <div class="flexbox" id="f11">  <div class="inserted">[NewDiv]</div><div>[OldText]</div></div>
+    <div class="flexbox" id="f12"><div>[OldText]</div><div class="inserted">[NewDiv]</div>  </div>
+    <div class="flexbox" id="f13"><div>[OldText]</div>  <div class="inserted">[NewDiv]</div></div>
+    <div class="flexbox" id="f14"><div class="inserted">[NewDiv]</div>[NewText]<div>[OldText]</div></div>
+    <div class="flexbox" id="f15">[NewText]<div class="inserted">[NewDiv]</div><div>[OldText]</div></div>
+    <div class="flexbox" id="f16"><div>[OldText]</div><div class="inserted">[NewDiv]</div>[NewText]</div>
+    <div class="flexbox" id="f17"><div>[OldText]</div>[NewText]<div class="inserted">[NewDiv]</div></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2.xhtml
new file mode 100644
index 000000000000..b982ca194cd9
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2.xhtml
@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that we reconstruct frames as necessary, after content
+     (including whitespace & divs) is dynamically inserted as a child of a
+     flexbox.  (Note that in cases where we know the whitespace is going to be
+     dropped, we don't bother reconstructing frames. This test is to be sure we
+     aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <style>
+      body { font-size: 10px; }
+
+      <!-- to make inserted div elements stand out -->
+      div.inserted { background: teal; }
+
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 300px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+        margin-bottom: 1px;
+        white-space: pre;
+      }
+    </style>
+    <script>
+      function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+        var parent = document.getElementById(aParentId);
+        var insertBeforeTarget = parent.firstChild;
+        for (var i = 0; i &lt; aPosn; i++) {
+          insertBeforeTarget = insertBeforeTarget.nextSibling;
+        }
+        parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+      }
+
+      function createDivElem() {
+        var div = document.createElement("div");
+        div.setAttribute("class", "inserted");
+        div.appendChild(document.createTextNode("[NewDiv]"));
+        return div;
+      }
+
+      function tweak() {
+        // Inserting div, adjacent to inline content
+        // -----------------------------------------
+        insertNodeAtPosnInElem(createDivElem(), 0, "f0");
+        insertNodeAtPosnInElem(createDivElem(), 1, "f1");
+
+        // Inserting div and whitespace, before inline content
+        // ---------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("  "), 0, "f2");
+        insertNodeAtPosnInElem(createDivElem(),               0, "f2");
+
+        insertNodeAtPosnInElem(createDivElem(),               0, "f3");
+        insertNodeAtPosnInElem(document.createTextNode("  "), 0, "f3");
+
+        // Inserting div and whitespace, after inline content
+        // ---------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("  "), 1, "f4");
+        insertNodeAtPosnInElem(createDivElem(),               1, "f4");
+
+        insertNodeAtPosnInElem(createDivElem(),               1, "f5");
+        insertNodeAtPosnInElem(document.createTextNode("  "), 1, "f5");
+
+        // Inserting div and text, before inline content
+        // ---------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+        insertNodeAtPosnInElem(createDivElem(),                      0, "f6");
+
+        insertNodeAtPosnInElem(createDivElem(),                      0, "f7");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+        // Inserting div and text, after inline content
+        // ---------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+        insertNodeAtPosnInElem(createDivElem(),                      1, "f8");
+
+        insertNodeAtPosnInElem(createDivElem(),                      1, "f9");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+        document.documentElement.removeAttribute("class");
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+  </head>
+  <body>
+    <div class="flexbox" id="f0"><div>[OldText]</div></div>
+    <div class="flexbox" id="f1"><div>[OldText]</div></div>
+    <div class="flexbox" id="f2"><div>[OldText]</div></div>
+    <div class="flexbox" id="f3"><div>[OldText]</div></div>
+    <div class="flexbox" id="f4"><div>[OldText]</div></div>
+    <div class="flexbox" id="f5"><div>[OldText]</div></div>
+    <div class="flexbox" id="f6"><div>[OldText]</div></div>
+    <div class="flexbox" id="f7"><div>[OldText]</div></div>
+    <div class="flexbox" id="f8"><div>[OldText]</div></div>
+    <div class="flexbox" id="f9"><div>[OldText]</div></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3-ref.xhtml
new file mode 100644
index 000000000000..2573b1e09756
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3-ref.xhtml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This reference case is like its textcase, but with the testcase's dynamic
+     modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      body { font-size: 10px; }
+
+      <!-- to make inserted span elements stand out -->
+      span.inserted { background: teal; }
+
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 300px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+        margin-bottom: 1px;
+        white-space: pre;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox" id="f0"><span class="inserted">[NewSpan]</span><div>[OldText]</div></div>
+    <div class="flexbox" id="f1"><div>[OldText]</div><span class="inserted">[NewSpan]</span></div>
+    <div class="flexbox" id="f2"><span class="inserted">[NewSpan]</span>  <div>[OldText]</div></div>
+    <div class="flexbox" id="f3">  <span class="inserted">[NewSpan]</span><div>[OldText]</div></div>
+    <div class="flexbox" id="f4"><div>[OldText]</div><span class="inserted">[NewSpan]</span>  </div>
+    <div class="flexbox" id="f5"><div>[OldText]</div>  <span class="inserted">[NewSpan]</span></div>
+    <div class="flexbox" id="f6"><span class="inserted">[NewSpan]</span>[NewText]<div>[OldText]</div></div>
+    <div class="flexbox" id="f7">[NewText]<span class="inserted">[NewSpan]</span><div>[OldText]</div></div>
+    <div class="flexbox" id="f8"><div>[OldText]</div><span class="inserted">[NewSpan]</span>[NewText]</div>
+    <div class="flexbox" id="f9"><div>[OldText]</div>[NewText]<span class="inserted">[NewSpan]</span></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3.xhtml
new file mode 100644
index 000000000000..f153f283ae68
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3.xhtml
@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that we reconstruct frames as necessary, after content
+     (including whitespace & spans) is dynamically inserted as a child of a
+     flexbox.  (Note that in cases where we know the whitespace is going to be
+     dropped, we don't bother reconstructing frames. This test is to be sure we
+     aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <style>
+      body { font-size: 10px; }
+
+      <!-- to make inserted span elements stand out -->
+      span.inserted { background: teal; }
+
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 300px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+        margin-bottom: 1px;
+        white-space: pre;
+      }
+    </style>
+    <script>
+      function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+        var parent = document.getElementById(aParentId);
+        var insertBeforeTarget = parent.firstChild;
+        for (var i = 0; i &lt; aPosn; i++) {
+          insertBeforeTarget = insertBeforeTarget.nextSibling;
+        }
+        parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+      }
+
+      function createSpanElem() {
+        var span = document.createElement("span");
+        span.setAttribute("class", "inserted");
+        span.appendChild(document.createTextNode("[NewSpan]"));
+        return span;
+      }
+
+      function tweak() {
+        // Inserting span, on either side of existing content
+        // --------------------------------------------------
+        insertNodeAtPosnInElem(createSpanElem(), 0, "f0");
+        insertNodeAtPosnInElem(createSpanElem(), 1, "f1");
+
+        // Inserting span and whitespace, before existing content
+        // ------------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("  "), 0, "f2");
+        insertNodeAtPosnInElem(createSpanElem(),              0, "f2");
+
+        insertNodeAtPosnInElem(createSpanElem(),              0, "f3");
+        insertNodeAtPosnInElem(document.createTextNode("  "), 0, "f3");
+
+        // Inserting span and whitespace, after existing content
+        // -----------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("  "), 1, "f4");
+        insertNodeAtPosnInElem(createSpanElem(),              1, "f4");
+
+        insertNodeAtPosnInElem(createSpanElem(),              1, "f5");
+        insertNodeAtPosnInElem(document.createTextNode("  "), 1, "f5");
+
+        // Inserting span and text, before existing content
+        // ------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+        insertNodeAtPosnInElem(createSpanElem(),                     0, "f6");
+
+        insertNodeAtPosnInElem(createSpanElem(),                     0, "f7");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+        // Inserting span and text, after existing content
+        // -----------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+        insertNodeAtPosnInElem(createSpanElem(),                     1, "f8");
+
+        insertNodeAtPosnInElem(createSpanElem(),                     1, "f9");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+        document.documentElement.removeAttribute("class");
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+  </head>
+  <body>
+    <div class="flexbox" id="f0"><div>[OldText]</div></div>
+    <div class="flexbox" id="f1"><div>[OldText]</div></div>
+    <div class="flexbox" id="f2"><div>[OldText]</div></div>
+    <div class="flexbox" id="f3"><div>[OldText]</div></div>
+    <div class="flexbox" id="f4"><div>[OldText]</div></div>
+    <div class="flexbox" id="f5"><div>[OldText]</div></div>
+    <div class="flexbox" id="f6"><div>[OldText]</div></div>
+    <div class="flexbox" id="f7"><div>[OldText]</div></div>
+    <div class="flexbox" id="f8"><div>[OldText]</div></div>
+    <div class="flexbox" id="f9"><div>[OldText]</div></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-1.xhtml
new file mode 100644
index 000000000000..77a144050fee
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-1.xhtml
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that we reconstruct frames as necessary, after content
+     (including whitespace & text) is dynamically inserted as a child of a
+     flexbox.  (Note that in cases where we know the whitespace is going to be
+     dropped, we don't bother reconstructing frames. This test is to be sure we
+     aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <style>
+      body { font-size: 10px; }
+
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 300px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+        margin-bottom: 1px;
+        white-space: pre;
+      }
+    </style>
+    <script>
+      function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+        var parent = document.getElementById(aParentId);
+        var insertBeforeTarget = parent.firstChild;
+        for (var i = 0; i &lt; aPosn; i++) {
+          insertBeforeTarget = insertBeforeTarget.nextSibling;
+        }
+        parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+      }
+
+      function tweak() {
+        // Just inserting whitespace
+        // -------------------------
+        insertNodeAtPosnInElem(document.createTextNode("  "), 0, "f0");
+        insertNodeAtPosnInElem(document.createTextNode("  "), 1, "f1");
+
+        // Inserting text or text with whitespace
+        // --------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"),   0, "f2");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]  "), 0, "f3");
+        insertNodeAtPosnInElem(document.createTextNode("  [NewText]"), 0, "f4");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"),   1, "f5");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]  "), 1, "f6");
+        insertNodeAtPosnInElem(document.createTextNode("  [NewText]"), 1, "f7");
+
+        // Same as the whitespace cases immediately above, but now with separate
+        // text nodes for the whitespace vs. the text
+        insertNodeAtPosnInElem(document.createTextNode("  "),        0, "f8");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f8");
+
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f9");
+        insertNodeAtPosnInElem(document.createTextNode("  "),        0, "f9");
+
+        insertNodeAtPosnInElem(document.createTextNode("  "),        1, "f10");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f10");
+
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f11");
+        insertNodeAtPosnInElem(document.createTextNode("  "),        1, "f11");
+
+        document.documentElement.removeAttribute("class");
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+  </head>
+  <body>
+    <div class="flexbox" id="f0"><span>[OldText]</span></div>
+    <div class="flexbox" id="f1"><span>[OldText]</span></div>
+    <div class="flexbox" id="f2"><span>[OldText]</span></div>
+    <div class="flexbox" id="f3"><span>[OldText]</span></div>
+    <div class="flexbox" id="f4"><span>[OldText]</span></div>
+    <div class="flexbox" id="f5"><span>[OldText]</span></div>
+    <div class="flexbox" id="f6"><span>[OldText]</span></div>
+    <div class="flexbox" id="f7"><span>[OldText]</span></div>
+    <div class="flexbox" id="f8"><span>[OldText]</span></div>
+    <div class="flexbox" id="f9"><span>[OldText]</span></div>
+    <div class="flexbox" id="f10"><span>[OldText]</span></div>
+    <div class="flexbox" id="f11"><span>[OldText]</span></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-2.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-2.xhtml
new file mode 100644
index 000000000000..1bcdd5642bba
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-2.xhtml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that we reconstruct frames as necessary, after content
+     (including whitespace & divs) is dynamically inserted as a child of a
+     flexbox.  (Note that in cases where we know the whitespace is going to be
+     dropped, we don't bother reconstructing frames. This test is to be sure we
+     aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <style>
+      body {
+        font-size: 10px;
+      }
+
+      div.inserted {
+        background: teal; /* To make inserted div elements stand out. */
+      }
+
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 300px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+        margin-bottom: 1px;
+        white-space: pre;
+      }
+    </style>
+    <script>
+      function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+        var parent = document.getElementById(aParentId);
+        var insertBeforeTarget = parent.firstChild;
+        for (var i = 0; i &lt; aPosn; i++) {
+          insertBeforeTarget = insertBeforeTarget.nextSibling;
+        }
+        parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+      }
+
+      function createDivElem() {
+        var div = document.createElement("div");
+        div.setAttribute("class", "inserted");
+        div.appendChild(document.createTextNode("[NewDiv]"));
+        return div;
+      }
+
+      function tweak() {
+        // Inserting div, adjacent to inline content
+        // -----------------------------------------
+        insertNodeAtPosnInElem(createDivElem(), 0, "f0");
+        insertNodeAtPosnInElem(createDivElem(), 1, "f1");
+
+        // Inserting div and whitespace, before inline content
+        // ---------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("  "), 0, "f2");
+        insertNodeAtPosnInElem(createDivElem(),               0, "f2");
+
+        insertNodeAtPosnInElem(createDivElem(),               0, "f3");
+        insertNodeAtPosnInElem(document.createTextNode("  "), 0, "f3");
+
+        // Inserting div and whitespace, after inline content
+        // ---------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("  "), 1, "f4");
+        insertNodeAtPosnInElem(createDivElem(),               1, "f4");
+
+        insertNodeAtPosnInElem(createDivElem(),               1, "f5");
+        insertNodeAtPosnInElem(document.createTextNode("  "), 1, "f5");
+
+        // Inserting div and text, before inline content
+        // ---------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+        insertNodeAtPosnInElem(createDivElem(),                      0, "f6");
+
+        insertNodeAtPosnInElem(createDivElem(),                      0, "f7");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+        // Inserting div and text, after inline content
+        // ---------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+        insertNodeAtPosnInElem(createDivElem(),                      1, "f8");
+
+        insertNodeAtPosnInElem(createDivElem(),                      1, "f9");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+        document.documentElement.removeAttribute("class");
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+  </head>
+  <body>
+    <div class="flexbox" id="f0"><span>[OldText]</span></div>
+    <div class="flexbox" id="f1"><span>[OldText]</span></div>
+    <div class="flexbox" id="f2"><span>[OldText]</span></div>
+    <div class="flexbox" id="f3"><span>[OldText]</span></div>
+    <div class="flexbox" id="f4"><span>[OldText]</span></div>
+    <div class="flexbox" id="f5"><span>[OldText]</span></div>
+    <div class="flexbox" id="f6"><span>[OldText]</span></div>
+    <div class="flexbox" id="f7"><span>[OldText]</span></div>
+    <div class="flexbox" id="f8"><span>[OldText]</span></div>
+    <div class="flexbox" id="f9"><span>[OldText]</span></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml
new file mode 100644
index 000000000000..d504c4c646cb
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that we reconstruct frames as necessary, after content
+     (including whitespace & spans) is dynamically inserted as a child of a
+     flexbox.  (Note that in cases where we know the whitespace is going to be
+     dropped, we don't bother reconstructing frames. This test is to be sure we
+     aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <style>
+      body {
+        font-size: 10px;
+      }
+
+      span.inserted {
+        background: teal; /* To make inserted span elements stand out. */
+      }
+
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 300px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+        margin-bottom: 1px;
+        white-space: pre;
+      }
+    </style>
+    <script>
+      function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+        var parent = document.getElementById(aParentId);
+        var insertBeforeTarget = parent.firstChild;
+        for (var i = 0; i &lt; aPosn; i++) {
+          insertBeforeTarget = insertBeforeTarget.nextSibling;
+        }
+        parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+      }
+
+      function createSpanElem() {
+        var span = document.createElement("span");
+        span.setAttribute("class", "inserted");
+        span.appendChild(document.createTextNode("[NewSpan]"));
+        return span;
+      }
+
+      function tweak() {
+        // Inserting span, on either side of existing content
+        // --------------------------------------------------
+        insertNodeAtPosnInElem(createSpanElem(), 0, "f0");
+        insertNodeAtPosnInElem(createSpanElem(), 1, "f1");
+
+        // Inserting span and whitespace, before existing content
+        // ------------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("  "), 0, "f2");
+        insertNodeAtPosnInElem(createSpanElem(),              0, "f2");
+
+        insertNodeAtPosnInElem(createSpanElem(),              0, "f3");
+        insertNodeAtPosnInElem(document.createTextNode("  "), 0, "f3");
+
+        // Inserting span and whitespace, after existing content
+        // -----------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("  "), 1, "f4");
+        insertNodeAtPosnInElem(createSpanElem(),              1, "f4");
+
+        insertNodeAtPosnInElem(createSpanElem(),              1, "f5");
+        insertNodeAtPosnInElem(document.createTextNode("  "), 1, "f5");
+
+        // Inserting span and text, before existing content
+        // ------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+        insertNodeAtPosnInElem(createSpanElem(),                     0, "f6");
+
+        insertNodeAtPosnInElem(createSpanElem(),                     0, "f7");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+        // Inserting span and text, after existing content
+        // -----------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+        insertNodeAtPosnInElem(createSpanElem(),                     1, "f8");
+
+        insertNodeAtPosnInElem(createSpanElem(),                     1, "f9");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+        document.documentElement.removeAttribute("class");
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+  </head>
+  <body>
+    <div class="flexbox" id="f0"><span>[OldText]</span></div>
+    <div class="flexbox" id="f1"><span>[OldText]</span></div>
+    <div class="flexbox" id="f2"><span>[OldText]</span></div>
+    <div class="flexbox" id="f3"><span>[OldText]</span></div>
+    <div class="flexbox" id="f4"><span>[OldText]</span></div>
+    <div class="flexbox" id="f5"><span>[OldText]</span></div>
+    <div class="flexbox" id="f6"><span>[OldText]</span></div>
+    <div class="flexbox" id="f7"><span>[OldText]</span></div>
+    <div class="flexbox" id="f8"><span>[OldText]</span></div>
+    <div class="flexbox" id="f9"><span>[OldText]</span></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1-ref.xhtml
new file mode 100644
index 000000000000..2334aeeb5e05
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1-ref.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This reference case is like its textcase, but with the testcase's dynamic
+     modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      body { font-size: 10px; }
+
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 300px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+        margin-bottom: 1px;
+        white-space: pre;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox" id="f0">  [OldText]</div>
+    <div class="flexbox" id="f1">[OldText]  </div>
+    <div class="flexbox" id="f2">[NewText][OldText]</div>
+    <div class="flexbox" id="f3">[NewText]  [OldText]</div>
+    <div class="flexbox" id="f4">  [NewText][OldText]</div>
+    <div class="flexbox" id="f5">[OldText][NewText]</div>
+    <div class="flexbox" id="f6">[OldText][NewText]  </div>
+    <div class="flexbox" id="f7">[OldText]  [NewText]</div>
+    <div class="flexbox" id="f8">[NewText]  [OldText]</div>
+    <div class="flexbox" id="f9">  [NewText][OldText]</div>
+    <div class="flexbox" id="f10">[OldText][NewText]  </div>
+    <div class="flexbox" id="f11">[OldText]  [NewText]</div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1.xhtml
new file mode 100644
index 000000000000..49758077fdec
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1.xhtml
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that we reconstruct frames as necessary, after content
+     (including whitespace & text) is dynamically inserted as a child of a
+     flexbox.  (Note that in cases where we know the whitespace is going to be
+     dropped, we don't bother reconstructing frames. This test is to be sure we
+     aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <style>
+      body { font-size: 10px; }
+
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 300px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+        margin-bottom: 1px;
+        white-space: pre;
+      }
+    </style>
+    <script>
+      function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+        var parent = document.getElementById(aParentId);
+        var insertBeforeTarget = parent.firstChild;
+        for (var i = 0; i &lt; aPosn; i++) {
+          insertBeforeTarget = insertBeforeTarget.nextSibling;
+        }
+        parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+      }
+
+      function tweak() {
+        // Just inserting whitespace
+        // -------------------------
+        insertNodeAtPosnInElem(document.createTextNode("  "), 0, "f0");
+        insertNodeAtPosnInElem(document.createTextNode("  "), 1, "f1");
+
+        // Inserting text or text with whitespace
+        // --------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"),   0, "f2");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]  "), 0, "f3");
+        insertNodeAtPosnInElem(document.createTextNode("  [NewText]"), 0, "f4");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"),   1, "f5");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]  "), 1, "f6");
+        insertNodeAtPosnInElem(document.createTextNode("  [NewText]"), 1, "f7");
+
+        // Same as the whitespace cases immediately above, but now with separate
+        // text nodes for the whitespace vs. the text
+        insertNodeAtPosnInElem(document.createTextNode("  "),        0, "f8");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f8");
+
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f9");
+        insertNodeAtPosnInElem(document.createTextNode("  "),        0, "f9");
+
+        insertNodeAtPosnInElem(document.createTextNode("  "),        1, "f10");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f10");
+
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f11");
+        insertNodeAtPosnInElem(document.createTextNode("  "),        1, "f11");
+
+        document.documentElement.removeAttribute("class");
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+  </head>
+  <body>
+    <div class="flexbox" id="f0">[OldText]</div>
+    <div class="flexbox" id="f1">[OldText]</div>
+    <div class="flexbox" id="f2">[OldText]</div>
+    <div class="flexbox" id="f3">[OldText]</div>
+    <div class="flexbox" id="f4">[OldText]</div>
+    <div class="flexbox" id="f5">[OldText]</div>
+    <div class="flexbox" id="f6">[OldText]</div>
+    <div class="flexbox" id="f7">[OldText]</div>
+    <div class="flexbox" id="f8">[OldText]</div>
+    <div class="flexbox" id="f9">[OldText]</div>
+    <div class="flexbox" id="f10">[OldText]</div>
+    <div class="flexbox" id="f11">[OldText]</div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2-ref.xhtml
new file mode 100644
index 000000000000..757d6519f41f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2-ref.xhtml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This reference case is like its textcase, but with the testcase's dynamic
+     modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      body {
+        font-size: 10px;
+      }
+
+      div.inserted {
+        background: teal; /* To make inserted div elements stand out. */
+      }
+
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 300px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+        margin-bottom: 1px;
+        white-space: pre;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox" id="f8"><div class="inserted">[NewDiv]</div>[OldText]</div>
+    <div class="flexbox" id="f9">[OldText]<div class="inserted">[NewDiv]</div></div>
+    <div class="flexbox" id="f10"><div class="inserted">[NewDiv]</div>  [OldText]</div>
+    <div class="flexbox" id="f11">  <div class="inserted">[NewDiv]</div>[OldText]</div>
+    <div class="flexbox" id="f12">[OldText]<div class="inserted">[NewDiv]</div>  </div>
+    <div class="flexbox" id="f13">[OldText]  <div class="inserted">[NewDiv]</div></div>
+    <div class="flexbox" id="f14"><div class="inserted">[NewDiv]</div>[NewText][OldText]</div>
+    <div class="flexbox" id="f15">[NewText]<div class="inserted">[NewDiv]</div>[OldText]</div>
+    <div class="flexbox" id="f16">[OldText]<div class="inserted">[NewDiv]</div>[NewText]</div>
+    <div class="flexbox" id="f17">[OldText][NewText]<div class="inserted">[NewDiv]</div></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2.xhtml
new file mode 100644
index 000000000000..ed7433307720
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2.xhtml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that we reconstruct frames as necessary, after content
+     (including whitespace & divs) is dynamically inserted as a child of a
+     flexbox.  (Note that in cases where we know the whitespace is going to be
+     dropped, we don't bother reconstructing frames. This test is to be sure we
+     aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <style>
+      body {
+        font-size: 10px;
+      }
+
+      div.inserted {
+        background: teal; /* To make inserted div elements stand out. */
+      }
+
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 300px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+        margin-bottom: 1px;
+        white-space: pre;
+      }
+    </style>
+    <script>
+      function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+        var parent = document.getElementById(aParentId);
+        var insertBeforeTarget = parent.firstChild;
+        for (var i = 0; i &lt; aPosn; i++) {
+          insertBeforeTarget = insertBeforeTarget.nextSibling;
+        }
+        parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+      }
+
+      function createDivElem() {
+        var div = document.createElement("div");
+        div.setAttribute("class", "inserted");
+        div.appendChild(document.createTextNode("[NewDiv]"));
+        return div;
+      }
+
+      function tweak() {
+        // Inserting div, adjacent to inline content
+        // -----------------------------------------
+        insertNodeAtPosnInElem(createDivElem(), 0, "f0");
+        insertNodeAtPosnInElem(createDivElem(), 1, "f1");
+
+        // Inserting div and whitespace, before inline content
+        // ---------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("  "), 0, "f2");
+        insertNodeAtPosnInElem(createDivElem(),               0, "f2");
+
+        insertNodeAtPosnInElem(createDivElem(),               0, "f3");
+        insertNodeAtPosnInElem(document.createTextNode("  "), 0, "f3");
+
+        // Inserting div and whitespace, after inline content
+        // ---------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("  "), 1, "f4");
+        insertNodeAtPosnInElem(createDivElem(),               1, "f4");
+
+        insertNodeAtPosnInElem(createDivElem(),               1, "f5");
+        insertNodeAtPosnInElem(document.createTextNode("  "), 1, "f5");
+
+        // Inserting div and text, before inline content
+        // ---------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+        insertNodeAtPosnInElem(createDivElem(),                      0, "f6");
+
+        insertNodeAtPosnInElem(createDivElem(),                      0, "f7");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+        // Inserting div and text, after inline content
+        // ---------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+        insertNodeAtPosnInElem(createDivElem(),                      1, "f8");
+
+        insertNodeAtPosnInElem(createDivElem(),                      1, "f9");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+        document.documentElement.removeAttribute("class");
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+  </head>
+  <body>
+    <div class="flexbox" id="f0">[OldText]</div>
+    <div class="flexbox" id="f1">[OldText]</div>
+    <div class="flexbox" id="f2">[OldText]</div>
+    <div class="flexbox" id="f3">[OldText]</div>
+    <div class="flexbox" id="f4">[OldText]</div>
+    <div class="flexbox" id="f5">[OldText]</div>
+    <div class="flexbox" id="f6">[OldText]</div>
+    <div class="flexbox" id="f7">[OldText]</div>
+    <div class="flexbox" id="f8">[OldText]</div>
+    <div class="flexbox" id="f9">[OldText]</div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3-ref.xhtml
new file mode 100644
index 000000000000..28bb4b045335
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3-ref.xhtml
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This reference case is like its textcase, but with the testcase's dynamic
+     modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      body {
+        font-size: 10px;
+      }
+
+      span.inserted {
+        background: teal; /* To make inserted span elements stand out. */
+      }
+
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 300px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+        margin-bottom: 1px;
+        white-space: pre;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox" id="f0"><span class="inserted">[NewSpan]</span>[OldText]</div>
+    <div class="flexbox" id="f1">[OldText]<span class="inserted">[NewSpan]</span></div>
+    <div class="flexbox" id="f2"><span class="inserted">[NewSpan]</span>  [OldText]</div>
+    <div class="flexbox" id="f3">  <span class="inserted">[NewSpan]</span>[OldText]</div>
+    <div class="flexbox" id="f4">[OldText]<span class="inserted">[NewSpan]</span>  </div>
+    <div class="flexbox" id="f5">[OldText]  <span class="inserted">[NewSpan]</span></div>
+    <div class="flexbox" id="f6"><span class="inserted">[NewSpan]</span>[NewText][OldText]</div>
+    <div class="flexbox" id="f7">[NewText]<span class="inserted">[NewSpan]</span>[OldText]</div>
+    <div class="flexbox" id="f8">[OldText]<span class="inserted">[NewSpan]</span>[NewText]</div>
+    <div class="flexbox" id="f9">[OldText][NewText]<span class="inserted">[NewSpan]</span></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3.xhtml
new file mode 100644
index 000000000000..bef4539d7740
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3.xhtml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that we reconstruct frames as necessary, after content
+     (including whitespace & spans) is dynamically inserted as a child of a
+     flexbox.  (Note that in cases where we know the whitespace is going to be
+     dropped, we don't bother reconstructing frames. This test is to be sure we
+     aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <style>
+      body {
+        font-size: 10px;
+      }
+
+      span.inserted {
+        background: teal; /* To make inserted span elements stand out. */
+      }
+
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 300px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+        margin-bottom: 1px;
+        white-space: pre;
+      }
+    </style>
+    <script>
+      function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+        var parent = document.getElementById(aParentId);
+        var insertBeforeTarget = parent.firstChild;
+        for (var i = 0; i &lt; aPosn; i++) {
+          insertBeforeTarget = insertBeforeTarget.nextSibling;
+        }
+        parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+      }
+
+      function createSpanElem() {
+        var span = document.createElement("span");
+        span.setAttribute("class", "inserted");
+        span.appendChild(document.createTextNode("[NewSpan]"));
+        return span;
+      }
+
+      function tweak() {
+        // Inserting span, on either side of existing content
+        // --------------------------------------------------
+        insertNodeAtPosnInElem(createSpanElem(), 0, "f0");
+        insertNodeAtPosnInElem(createSpanElem(), 1, "f1");
+
+        // Inserting span and whitespace, before existing content
+        // ------------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("  "), 0, "f2");
+        insertNodeAtPosnInElem(createSpanElem(),              0, "f2");
+
+        insertNodeAtPosnInElem(createSpanElem(),              0, "f3");
+        insertNodeAtPosnInElem(document.createTextNode("  "), 0, "f3");
+
+        // Inserting span and whitespace, after existing content
+        // -----------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("  "), 1, "f4");
+        insertNodeAtPosnInElem(createSpanElem(),              1, "f4");
+
+        insertNodeAtPosnInElem(createSpanElem(),              1, "f5");
+        insertNodeAtPosnInElem(document.createTextNode("  "), 1, "f5");
+
+        // Inserting span and text, before existing content
+        // ------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+        insertNodeAtPosnInElem(createSpanElem(),                     0, "f6");
+
+        insertNodeAtPosnInElem(createSpanElem(),                     0, "f7");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+        // Inserting span and text, after existing content
+        // -----------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+        insertNodeAtPosnInElem(createSpanElem(),                     1, "f8");
+
+        insertNodeAtPosnInElem(createSpanElem(),                     1, "f9");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+        document.documentElement.removeAttribute("class");
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+  </head>
+  <body>
+    <div class="flexbox" id="f0">[OldText]</div>
+    <div class="flexbox" id="f1">[OldText]</div>
+    <div class="flexbox" id="f2">[OldText]</div>
+    <div class="flexbox" id="f3">[OldText]</div>
+    <div class="flexbox" id="f4">[OldText]</div>
+    <div class="flexbox" id="f5">[OldText]</div>
+    <div class="flexbox" id="f6">[OldText]</div>
+    <div class="flexbox" id="f7">[OldText]</div>
+    <div class="flexbox" id="f8">[OldText]</div>
+    <div class="flexbox" id="f9">[OldText]</div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1-ref.xhtml
new file mode 100644
index 000000000000..9fe16f9122c0
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1-ref.xhtml
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This reference case is like its textcase, but with the testcase's dynamic
+     modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      body { font-size: 10px; }
+
+      <!-- to make inserted span elements stand out -->
+      span {
+        background: teal;
+        padding: 3px;
+      }
+
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 300px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+        margin-bottom: 1px;
+        white-space: pre;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox" id="f0"><span/>[orig]</div>
+    <div class="flexbox" id="f1">[orig]<span/></div>
+    <div class="flexbox" id="f2"><span/>  [orig]</div>
+    <div class="flexbox" id="f3">  <span/>[orig]</div>
+    <div class="flexbox" id="f4">[orig]<span/>  </div>
+    <div class="flexbox" id="f5">[orig]  <span/></div>
+    <div class="flexbox" id="f6"><span/>[NewText][orig]</div>
+    <div class="flexbox" id="f7">[NewText]<span/>[orig]</div>
+    <div class="flexbox" id="f8">[orig]<span/>[NewText]</div>
+    <div class="flexbox" id="f9">[orig][NewText]<span/></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1.xhtml
new file mode 100644
index 000000000000..cdf5b2d9ddcb
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1.xhtml
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test is a variant of flexbox-dyn-insertAroundText-3.xhtml with the
+     inserted spans being empty & having padding. This triggered invalidation
+     issues with an older work-in-progress patch, so I'm adding this reftest to
+     track that issue & prevent it from regressing.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <style>
+      body { font-size: 10px; }
+
+      <!-- to make inserted span elements stand out -->
+      span {
+        background: teal;
+        padding: 3px;
+      }
+
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 300px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+        margin-bottom: 1px;
+        white-space: pre;
+      }
+    </style>
+    <script>
+      function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+        var parent = document.getElementById(aParentId);
+        var insertBeforeTarget = parent.firstChild;
+        for (var i = 0; i &lt; aPosn; i++) {
+          insertBeforeTarget = insertBeforeTarget.nextSibling;
+        }
+        parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+      }
+
+      function createSpanElem() {
+        return document.createElement("span");
+      }
+
+      function tweak() {
+        // Inserting span, on either side of existing content
+        // --------------------------------------------------
+        insertNodeAtPosnInElem(createSpanElem(), 0, "f0");
+        insertNodeAtPosnInElem(createSpanElem(), 1, "f1");
+
+        // Inserting span and whitespace, before existing content
+        // ------------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("  "), 0, "f2");
+        insertNodeAtPosnInElem(createSpanElem(),              0, "f2");
+
+        insertNodeAtPosnInElem(createSpanElem(),              0, "f3");
+        insertNodeAtPosnInElem(document.createTextNode("  "), 0, "f3");
+
+        // Inserting span and whitespace, after existing content
+        // -----------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("  "), 1, "f4");
+        insertNodeAtPosnInElem(createSpanElem(),              1, "f4");
+
+        insertNodeAtPosnInElem(createSpanElem(),              1, "f5");
+        insertNodeAtPosnInElem(document.createTextNode("  "), 1, "f5");
+
+        // Inserting span and text, before existing content
+        // ------------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+        insertNodeAtPosnInElem(createSpanElem(),                     0, "f6");
+
+        insertNodeAtPosnInElem(createSpanElem(),                     0, "f7");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+        // Inserting span and text, after existing content
+        // -----------------------------------------------
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+        insertNodeAtPosnInElem(createSpanElem(),                     1, "f8");
+
+        insertNodeAtPosnInElem(createSpanElem(),                     1, "f9");
+        insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+        document.documentElement.removeAttribute("class");
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+  </head>
+  <body>
+    <div class="flexbox" id="f0">[orig]</div>
+    <div class="flexbox" id="f1">[orig]</div>
+    <div class="flexbox" id="f2">[orig]</div>
+    <div class="flexbox" id="f3">[orig]</div>
+    <div class="flexbox" id="f4">[orig]</div>
+    <div class="flexbox" id="f5">[orig]</div>
+    <div class="flexbox" id="f6">[orig]</div>
+    <div class="flexbox" id="f7">[orig]</div>
+    <div class="flexbox" id="f8">[orig]</div>
+    <div class="flexbox" id="f9">[orig]</div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-empty-1-ref.xhtml b/layout/reftests/flexbox/flexbox-empty-1-ref.xhtml
new file mode 100644
index 000000000000..074436d1129a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-empty-1-ref.xhtml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for behavior of flex containers that have no children -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        border: 1px dotted blue;
+        background: yellow;
+      }
+
+      div.withPadding {
+        padding: 2px 3px 4px 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"/>
+    <div class="flexbox" style="width: 5px"/>
+    <div class="flexbox" style="width: -moz-available"/>
+    <div class="flexbox" style="width: -moz-max-content"/>
+    <div class="flexbox" style="width: -moz-min-content"/>
+    <div class="flexbox" style="height: 6px"/>
+    <div class="flexbox" style="width: 7px; height: 8px"/>
+
+    <!-- now with padding -->
+    <div class="flexbox withPadding"/>
+    <div class="flexbox withPadding" style="width: 5px"/>
+    <div class="flexbox withPadding" style="width: -moz-available"/>
+    <div class="flexbox withPadding" style="width: -moz-max-content"/>
+    <div class="flexbox withPadding" style="width: -moz-min-content"/>
+    <div class="flexbox withPadding" style="height: 6px"/>
+    <div class="flexbox withPadding" style="width: 7px; height: 8px"/>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-empty-1a.xhtml b/layout/reftests/flexbox/flexbox-empty-1a.xhtml
new file mode 100644
index 000000000000..3b7f59af43df
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-empty-1a.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for behavior of flex containers that have no children -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        border: 1px dotted blue;
+        background: yellow;
+        display: -moz-flex;
+      }
+
+      div.withPadding {
+        padding: 2px 3px 4px 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"/>
+    <div class="flexbox" style="width: 5px"/>
+    <div class="flexbox" style="width: -moz-available"/>
+    <div class="flexbox" style="width: -moz-max-content"/>
+    <div class="flexbox" style="width: -moz-min-content"/>
+    <div class="flexbox" style="height: 6px"/>
+    <div class="flexbox" style="width: 7px; height: 8px"/>
+
+    <!-- now with padding -->
+    <div class="flexbox withPadding"/>
+    <div class="flexbox withPadding" style="width: 5px"/>
+    <div class="flexbox withPadding" style="width: -moz-available"/>
+    <div class="flexbox withPadding" style="width: -moz-max-content"/>
+    <div class="flexbox withPadding" style="width: -moz-min-content"/>
+    <div class="flexbox withPadding" style="height: 6px"/>
+    <div class="flexbox withPadding" style="width: 7px; height: 8px"/>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-empty-1b.xhtml b/layout/reftests/flexbox/flexbox-empty-1b.xhtml
new file mode 100644
index 000000000000..7f34f5d6f6ef
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-empty-1b.xhtml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     Testcase for behavior of flex containers that have no children.  This
+     testcase differs from the "1a" variant in that it's got a single space
+     inside each flex container (which should be ignored, since the flexbox
+     spec says we shouldn't create a flex item for an entirely-whitespace run
+     of inline content).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        border: 1px dotted blue;
+        background: yellow;
+        display: -moz-flex;
+      }
+
+      div.withPadding {
+        padding: 2px 3px 4px 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">  </div>
+    <div class="flexbox" style="width: 5px"> </div>
+    <div class="flexbox" style="width: -moz-available"> </div>
+    <div class="flexbox" style="width: -moz-max-content"> </div>
+    <div class="flexbox" style="width: -moz-min-content"> </div>
+    <div class="flexbox" style="height: 6px"> </div>
+    <div class="flexbox" style="width: 7px; height: 8px"> </div>
+
+    <!-- now with padding -->
+    <div class="flexbox withPadding"> </div>
+    <div class="flexbox withPadding" style="width: 5px"> </div>
+    <div class="flexbox withPadding" style="width: -moz-available"> </div>
+    <div class="flexbox withPadding" style="width: -moz-max-content"> </div>
+    <div class="flexbox withPadding" style="width: -moz-min-content"> </div>
+    <div class="flexbox withPadding" style="height: 6px"> </div>
+    <div class="flexbox withPadding" style="width: 7px; height: 8px"> </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-1-ref.xhtml b/layout/reftests/flexbox/flexbox-float-1-ref.xhtml
new file mode 100644
index 000000000000..e4cd6efd7e35
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-1-ref.xhtml
@@ -0,0 +1,39 @@
+<?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>
+    <style>
+      div.flexbox {
+        display: -moz-flex;
+        width: 400px;
+        margin-bottom: 2px;
+        font-family: sans-serif;
+        background: lightgreen;
+        -moz-justify-content: space-around;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      aaa<div>[[[</div>bbb
+    </div>
+    <div class="flexbox">
+      aaa<div>]]]</div>bbb
+    </div>
+    <div class="flexbox">
+      aaa<div>[[[</div>
+    </div>
+    <div class="flexbox">
+      aaa<div>]]]</div>
+    </div>
+    <div class="flexbox">
+      <div>[[[</div>bbb
+    </div>
+    <div class="flexbox">
+      <div>]]]</div>bbb
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-1a.xhtml b/layout/reftests/flexbox/flexbox-float-1a.xhtml
new file mode 100644
index 000000000000..b61085e11b1d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-1a.xhtml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that 'float' on a direct child of a flexbox won't
+     actually cause it to be floated.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        display: -moz-flex;
+        width: 400px;
+        margin-bottom: 2px;
+        font-family: sans-serif;
+        background: lightgreen;
+        -moz-justify-content: space-around;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- These cases have a span as a direct child of the flexbox. The span
+         should become display:block (and hence form its own flex item),
+         but it shouldn't actually float.
+      -->
+    <div class="flexbox">
+      aaa<span style="float: left">[[[</span>bbb
+    </div>
+    <div class="flexbox">
+      aaa<span style="float: right">]]]</span>bbb
+    </div>
+    <div class="flexbox">
+      aaa<span style="float: left">[[[</span>
+    </div>
+    <div class="flexbox">
+      aaa<span style="float: right">]]]</span>
+    </div>
+    <div class="flexbox">
+      <span style="float: left">[[[</span>bbb
+    </div>
+    <div class="flexbox">
+      <span style="float: right">]]]</span>bbb
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-1b.xhtml b/layout/reftests/flexbox/flexbox-float-1b.xhtml
new file mode 100644
index 000000000000..4cafed12fcb6
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-1b.xhtml
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test is like flexbox-float-1a.xhtml, but with the float-styled
+     element already being a block. (Should render the same.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        display: -moz-flex;
+        width: 400px;
+        margin-bottom: 2px;
+        font-family: sans-serif;
+        background: lightgreen;
+        -moz-justify-content: space-around;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      aaa<div style="float: left">[[[</div>bbb
+    </div>
+    <div class="flexbox">
+      aaa<div style="float: right">]]]</div>bbb
+    </div>
+    <div class="flexbox">
+      aaa<div style="float: left">[[[</div>
+    </div>
+    <div class="flexbox">
+      aaa<div style="float: right">]]]</div>
+    </div>
+    <div class="flexbox">
+      <div style="float: left">[[[</div>bbb
+    </div>
+    <div class="flexbox">
+      <div style="float: right">]]]</div>bbb
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-1c.xhtml b/layout/reftests/flexbox/flexbox-float-1c.xhtml
new file mode 100644
index 000000000000..76646048e0f0
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-1c.xhtml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test is like flexbox-float-1a.xhtml, but with the float-styled
+     element dynamically inserted.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+  <head>
+    <script>
+      function generateFloat(aFloatDirection) {
+        var newElem = document.createElement("span");
+        newElem.setAttribute("style", "float: " + aFloatDirection);
+        newElem.innerHTML = aFloatDirection == "left" ? "[[[" : "]]]";
+        return newElem;
+      }
+
+      function tweak() {
+        var containerList = document.getElementsByClassName("flexbox");
+        for (var i = 0; i &lt; containerList.length; i++) {
+          var container = containerList[i];
+          var newElem = generateFloat(container.getAttribute("floatValToUse"));
+
+          var nodeToInsertBefore;
+          var insertPosn = container.getAttribute("insertPosn");
+          if (insertPosn == "begin") {
+            nodeToInsertBefore = container.firstChild;
+          } else if (insertPosn == "mid") {
+            nodeToInsertBefore = container.firstChild.nextSibling;
+          } else if (insertPosn == "end") {
+            nodeToInsertBefore = null;
+          }
+
+          container.insertBefore(newElem, nodeToInsertBefore);
+        }
+
+        document.documentElement.removeAttribute("class");
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+    <style>
+      div.flexbox {
+        display: -moz-flex;
+        width: 400px;
+        margin-bottom: 2px;
+        font-family: sans-serif;
+        background: lightgreen;
+        -moz-justify-content: space-around;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox" floatValToUse="left" insertPosn="mid">
+      aaa<span>bbb</span>
+    </div>
+    <div class="flexbox" floatValToUse="right" insertPosn="mid">
+      aaa<span>bbb</span>
+    </div>
+    <div class="flexbox" floatValToUse="left" insertPosn="end">
+      aaa
+    </div>
+    <div class="flexbox" floatValToUse="right" insertPosn="end">
+      aaa
+    </div>
+    <div class="flexbox" floatValToUse="left" insertPosn="begin">
+      bbb
+    </div>
+    <div class="flexbox" floatValToUse="right" insertPosn="begin">
+      bbb
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-1d.xhtml b/layout/reftests/flexbox/flexbox-float-1d.xhtml
new file mode 100644
index 000000000000..be723b5ab962
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-1d.xhtml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test is like flexbox-float-1b.xhtml, but with the float-styled
+     element dynamically inserted.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+  <head>
+    <script>
+      function generateFloat(aFloatDirection) {
+        var newElem = document.createElement("div");
+        newElem.setAttribute("style", "float: " + aFloatDirection);
+        newElem.innerHTML = aFloatDirection == "left" ? "[[[" : "]]]";
+        return newElem;
+      }
+
+      function tweak() {
+        var containerList = document.getElementsByClassName("flexbox");
+        for (var i = 0; i &lt; containerList.length; i++) {
+          var container = containerList[i];
+          var newElem = generateFloat(container.getAttribute("floatValToUse"));
+
+          var nodeToInsertBefore;
+          var insertPosn = container.getAttribute("insertPosn");
+          if (insertPosn == "begin") {
+            nodeToInsertBefore = container.firstChild;
+          } else if (insertPosn == "mid") {
+            nodeToInsertBefore = container.firstChild.nextSibling;
+          } else if (insertPosn == "end") {
+            nodeToInsertBefore = null;
+          }
+
+          container.insertBefore(newElem, nodeToInsertBefore);
+        }
+
+        document.documentElement.removeAttribute("class");
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+    <style>
+      div.flexbox {
+        display: -moz-flex;
+        width: 400px;
+        margin-bottom: 2px;
+        font-family: sans-serif;
+        background: lightgreen;
+        -moz-justify-content: space-around;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox" floatValToUse="left" insertPosn="mid">
+      aaa<span>bbb</span>
+    </div>
+    <div class="flexbox" floatValToUse="right" insertPosn="mid">
+      aaa<span>bbb</span>
+    </div>
+    <div class="flexbox" floatValToUse="left" insertPosn="end">
+      aaa
+    </div>
+    <div class="flexbox" floatValToUse="right" insertPosn="end">
+      aaa
+    </div>
+    <div class="flexbox" floatValToUse="left" insertPosn="begin">
+      bbb
+    </div>
+    <div class="flexbox" floatValToUse="right" insertPosn="begin">
+      bbb
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-2-ref.xhtml b/layout/reftests/flexbox/flexbox-float-2-ref.xhtml
new file mode 100644
index 000000000000..18ec269fdfed
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-2-ref.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This reference case uses a div with "text-align: center" in place of a
+     flex container, and has the text "lll" and "rrr" already placed at the
+     target position instead of having it positioned with the "float" property.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        text-align: center;
+        font-family: sans-serif;
+        width: 400px;
+        margin-bottom: 2px;
+        background: lightgreen;
+        -moz-justify-content: space-around;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      lllaaabbb
+    </div>
+    <div class="flexbox">
+      aaabbbrrr
+    </div>
+
+    <div class="flexbox">
+      lllaaabbb
+    </div>
+    <div class="flexbox">
+      aaabbbrrr
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-2a.xhtml b/layout/reftests/flexbox/flexbox-float-2a.xhtml
new file mode 100644
index 000000000000..7f7ea6cd6f03
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-2a.xhtml
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that 'float' on a grandchild of a flex container _will_
+     cause the element to be floated.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        display: -moz-flex;
+        font-family: sans-serif;
+        width: 400px;
+        margin-bottom: 2px;
+        background: lightgreen;
+        -moz-justify-content: space-around;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- These cases have a floated span as a grandchild of the flex container.
+         The span should float within its flex item. -->
+    <div class="flexbox">
+      aaa<span><span style="float: left">lll</span></span>bbb
+    </div>
+    <div class="flexbox">
+      aaa<span><span style="float: right">rrr</span></span>bbb
+    </div>
+
+    <!-- These cases have a floated div as a grandchild of the flex container.
+         The div should float within its flex item. -->
+    <div class="flexbox">
+      aaa<span><div style="float: left">lll</div></span>bbb
+    </div>
+    <div class="flexbox">
+      aaa<span><div style="float: right">rrr</div></span>bbb
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-2b.xhtml b/layout/reftests/flexbox/flexbox-float-2b.xhtml
new file mode 100644
index 000000000000..687d87f5ee85
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-2b.xhtml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that 'float' on a grandchild of a flex container _will_
+     cause the element to be floated.
+
+     This differs from the "2a" variant in that the flex items are <div>s
+     rather than <span>s (though that shouldn't matter, because <span> as a
+     flex item should become "display:block").
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        display: -moz-flex;
+        font-family: sans-serif;
+        width: 400px;
+        margin-bottom: 2px;
+        background: lightgreen;
+        -moz-justify-content: space-around;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- These cases have a floated span as a grandchild of the flex container.
+         The span should float within its flex item. -->
+    <div class="flexbox">
+      <div>aaa<span style="float: left">lll</span>bbb</div>
+    </div>
+    <div class="flexbox">
+      <div>aaa<span style="float: right">rrr</span>bbb</div>
+    </div>
+
+    <!-- These cases have a floated div as a grandchild of the flex container.
+         The div should float within its flex item. -->
+    <div class="flexbox">
+      <div>aaa<div style="float: left">lll</div>bbb</div>
+    </div>
+    <div class="flexbox">
+      <div>aaa<div style="float: right">rrr</div>bbb</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1-ref.xhtml
new file mode 100644
index 000000000000..b1008e7cc005
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1-ref.xhtml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     Reference case, using a table with fixed-size cells instead of a
+     flex container.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <link rel="stylesheet" type="text/css" href="ahem.css" />
+    <style>
+      table {
+        font: 10px Ahem;
+        height: 100px;
+        width: 200px;
+      }
+      td { vertical-align: top; }
+      td.a {
+        width: 30px;
+        background: lightgreen;
+      }
+      td.b {
+        width: 50px;
+        background: yellow;
+      }
+      td.inflex {
+        width: 20px;
+        background: gray;
+      }
+    </style>
+  </head>
+  <body>
+    <table cellspacing="0" cellpadding="0">
+      <tr>
+        <td class="a"/>
+        <td>text</td>
+        <td class="b"/>
+        <td><i>italic</i></td>
+        <td class="inflex"></td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1a.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1a.xhtml
new file mode 100644
index 000000000000..309a29ed7bbe
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1a.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test has static inline content intermixed with flex items,
+     inside a flex container.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <link rel="stylesheet" type="text/css" href="ahem.css" />
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        font: 10px Ahem;
+        width: 200px;
+        display: -moz-flex;
+      }
+      div.a {
+        -moz-flex: 1 0 20px;
+        background: lightgreen;
+      }
+      div.b {
+        -moz-flex: 2 0 30px;
+        background: yellow;
+      }
+      div.inflex {
+        -moz-flex: 0 0 20px;
+        background: gray;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"
+       ><div class="a"/>text<div class="b"/><i>italic</i
+       ><div class="inflex"/></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1b.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1b.xhtml
new file mode 100644
index 000000000000..0a7c02547888
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1b.xhtml
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test inserts a new div into some inline content in a flex container.
+     That should split the inline content into two flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <link rel="stylesheet" type="text/css" href="ahem.css" />
+    <script>
+      function tweak() {
+        var flexbox = document.getElementsByClassName("flexbox")[0];
+        var insertionPoint = flexbox.firstChild.nextSibling.nextSibling;
+
+        var newDiv = document.createElement("div");
+        newDiv.setAttribute("class", "b");
+
+        flexbox.insertBefore(newDiv, insertionPoint);
+
+        document.documentElement.removeAttribute("class");
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        font: 10px Ahem;
+        width: 200px;
+        display: -moz-flex;
+      }
+      div.a {
+        -moz-flex: 1 0 20px;
+        background: lightgreen;
+      }
+      div.b {
+        -moz-flex: 2 0 30px;
+        background: yellow;
+      }
+      div.inflex {
+        -moz-flex: 0 0 20px;
+        background: gray;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"
+       ><div class="a"/>text<i>italic</i
+       ><div class="inflex"/></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2-ref.xhtml
new file mode 100644
index 000000000000..d00d7dfb3622
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2-ref.xhtml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     Reference case with a stretch of inline content in a flex container.
+     (The corresponding testcase has a div interrupting the run, which gets
+     removed, hopefully making it look like this reference case.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        width: 200px;
+        display: -moz-flex;
+      }
+      div.a {
+        -moz-flex: 1 0 20px;
+        background: lightgreen;
+      }
+      div.inflex {
+        -moz-flex: 0 0 20px;
+        background: gray;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"
+       ><div class="a"/>text<i>italic</i
+       ><div class="inflex"/></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.xhtml
new file mode 100644
index 000000000000..227315a123a9
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.xhtml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test removes a div from the middle of some inline content in a flex
+     container. That should merge the inline content into a single flex item.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <script>
+      function tweak() {
+        var removeMe = document.getElementById("removeMe");
+        removeMe.parentNode.removeChild(removeMe);
+        document.documentElement.removeAttribute("class");
+      }
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        width: 200px;
+        display: -moz-flex;
+      }
+      div.a {
+        -moz-flex: 1 0 20px;
+        background: lightgreen;
+      }
+      div.b {
+        -moz-flex: 2 0 30px;
+        background: yellow;
+      }
+      div.inflex {
+        -moz-flex: 0 0 20px;
+        background: gray;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"
+       ><div class="a"/>text<div class="b" id="removeMe"/><i>italic</i
+       ><div class="inflex"/></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3-ref.xhtml
new file mode 100644
index 000000000000..d2b454539173
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3-ref.xhtml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     Reference case, using a block instead of a flexbox.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <link rel="stylesheet" type="text/css" href="ahem.css" />
+    <style>
+      div#block {
+        width: 100px;
+        font: 10px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="block"><u>abc def ghi</u> jkl <i>mno pqr stu</i></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3a.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3a.xhtml
new file mode 100644
index 000000000000..35ef1f4385dd
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3a.xhtml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test has a few inline elements in a flex container, for comparison
+     against the "b" & "c" variants of this test (which use dynamic tweaks).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <link rel="stylesheet" type="text/css" href="ahem.css" />
+    <style>
+      div#flexbox {
+        width: 100px;
+        display: -moz-flex;
+        font: 10px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="flexbox"><u>abc def ghi</u> jkl <i>mno pqr stu</i></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.xhtml
new file mode 100644
index 000000000000..64ae6a511755
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test inserts a some inline content in a flex container, just before a
+     stretch of existing inline content. The new content should be incorporated
+     into the same anonymous flex item as the existing content.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <link rel="stylesheet" type="text/css" href="ahem.css" />
+    <script>
+      function tweak() {
+        var newInlineContent = document.createElement("u");
+        newInlineContent.innerHTML = "abc def ghi";
+
+        var flexbox = document.getElementById("flexbox");
+        flexbox.insertBefore(newInlineContent, flexbox.firstChild);
+
+        document.documentElement.removeAttribute("class");
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+    <style>
+      div#flexbox {
+        width: 100px;
+        display: -moz-flex;
+        font: 10px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="flexbox"> jkl <i>mno pqr stu</i></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.xhtml
new file mode 100644
index 000000000000..6ce4ae5984ea
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test inserts a some inline content in a flex container, just after a
+     stretch of existing inline content. The new content should be incorporated
+     into the same anonymous flex item as the existing content.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <link rel="stylesheet" type="text/css" href="ahem.css" />
+    <script>
+      function tweak() {
+        var newInlineContent = document.createElement("i");
+        newInlineContent.innerHTML = "mno pqr stu";
+
+        var flexbox = document.getElementById("flexbox");
+        flexbox.insertBefore(newInlineContent, null);
+
+        document.documentElement.removeAttribute("class");
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+    <style>
+      div#flexbox {
+        width: 100px;
+        display: -moz-flex;
+        font: 10px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="flexbox"><u>abc def ghi</u> jkl </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4-ref.xhtml
new file mode 100644
index 000000000000..cbb99ba9f0dd
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4-ref.xhtml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This reference case simply has text centered within a div. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div {
+        width: 200px;
+        height: 100px;
+        background: lightgreen;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div>text</div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4.xhtml
new file mode 100644
index 000000000000..9695572b0962
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4.xhtml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that a flex container which only contains text
+     will render correctly. We use -moz-justify-content to position the text
+     in the center of the flex container, as a sanity-check to be sure we
+     are in fact getting a flex container.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        width: 200px;
+        height: 100px;
+        background: lightgreen;
+        -moz-justify-content: center;
+        display: -moz-flex;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">text</div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5-ref.xhtml
new file mode 100644
index 000000000000..e54da9a9dabb
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5-ref.xhtml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This reference case is the same as the corresponding testcase,
+     but with the dynamic removal already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        width: 200px;
+        height: 100px;
+        background: lightgreen;
+        -moz-justify-content: space-around;
+        display: -moz-flex;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">text<div>div</div></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5.xhtml
new file mode 100644
index 000000000000..7adc4d58b763
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5.xhtml
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test removes a run of inline content from a flexbox, which
+     should trigger the removal of its now-empty anonymous flex item.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <script>
+      function tweak() {
+        var removeMe = document.getElementById("removeMe");
+        removeMe.parentNode.removeChild(removeMe);
+        document.documentElement.removeAttribute("class");
+      }
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+    <style>
+      div.flexbox {
+        width: 200px;
+        height: 100px;
+        background: lightgreen;
+        -moz-justify-content: space-around;
+        display: -moz-flex;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">text<div>div</div>
+      <span id="removeMe">REMOVE</span>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-6-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-6-ref.xhtml
new file mode 100644
index 000000000000..f5fca2f2907a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-6-ref.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This reference case is like its testcase, but with an explicit div
+     in the place where we expect an anonymous flex item to be generated
+     in the testcase.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        width: 200px;
+        height: 100px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+        border: 1px dotted black;
+      }
+      div.a {
+        width: 30px;
+        height: 50px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 40px;
+        height: 50px;
+        background: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div><span>abc<div class="a"/>def</span></div>
+      <div class="b"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-6.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-6.xhtml
new file mode 100644
index 000000000000..44c192eed0a2
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-6.xhtml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test has a block inside an inline inside a flexbox.  This is like one
+     of the examples in the flexbox spec, and the desired behavior is that
+     the entire inline (including the block inside of it) gets wrapped in an
+     anonymous flex item.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        width: 200px;
+        height: 100px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+        border: 1px dotted black;
+      }
+      div.a {
+        width: 30px;
+        height: 50px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 40px;
+        height: 50px;
+        background: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <span>abc<div class="a"/>def</span>
+      <div class="b"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1-ref.xhtml
new file mode 100644
index 000000000000..f11668e5962c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1-ref.xhtml
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     Reference case - see documentation in corresponding testcase.
+     This reference uses blocks where the testcase uses flexboxes.
+     They should be sized the same, since they're basically just text
+     with no special flex sizing properties in play.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <link rel="stylesheet" type="text/css" href="ahem.css" />
+    <style>
+      table {
+        width: 300px;
+        font: 10px Ahem;
+        margin-bottom: 2px;
+        border: 1px dashed black;
+      }
+
+      div.a { background: lightgreen; }
+      div.b { background: lightblue;  }
+
+      <!-- helper-classes for assigning pref / min / auto-width to our divs -->
+      div.prefWidth {
+        width: -moz-max-content;
+      }
+      div.minWidth {
+        width: -moz-min-content;
+      }
+      div.autoWidth {
+        width: auto;
+      }
+  </style>
+</head>
+<body>
+  <!-- both auto width -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
+       <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
+   </tr></table>
+
+   <!-- MIXING MIN WIDTH & AUTO -->
+   <!-- both min width -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
+       <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
+   </tr></table>
+   <!-- min,auto -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
+       <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
+   </tr></table>
+   <!-- auto,min -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
+       <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
+   </tr></table>
+
+   <!-- MIXING PREF WIDTH & AUTO -->
+   <!-- both prefWidth (NOTE: makes the table larger than it wants to be -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
+       <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
+   </tr></table>
+   <!-- pref,auto -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
+       <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
+   </tr></table>
+   <!-- auto,pref -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
+       <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
+   </tr></table>
+
+   <!-- MIXING PREF WIDTH & MIN WIDTH -->
+   <!-- min,pref -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
+       <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
+   </tr></table>
+   <!-- pref,min -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
+       <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
+   </tr></table>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.xhtml
new file mode 100644
index 000000000000..451819aa0b7c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.xhtml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test has a number of tables, each with 2 flexboxes side-by-side,
+     whose "width" values depend on the flexbox's min and/or pref widths.
+
+     There's not enough space for both flexboxes to fit side-by-side, so their
+     width preferences must be balanced This exercises
+     nsFlexContainerFrame::GetPrefWidth() & ::GetMinWidth().
+
+     IN EACH CASE, div.a has these intrinsic widths:
+       Pref width: 2*40 + 1*50 + 2*10 = 150px   (2*aaaa + 1*aaaaa + 2*space)
+       Min width: 50px  (width of "aaaaa")
+     and div.b has these intrinsic widths:
+       Pref width: 5*20 + 3*10 + 7*10 = 200px   (5*bb + 3*b + 7*space)
+       Min width: 20px  (width "bb")
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <link rel="stylesheet" type="text/css" href="ahem.css" />
+    <style>
+      table {
+        width: 300px;
+        font: 10px Ahem;
+        margin-bottom: 2px;
+        border: 1px dashed black;
+      }
+
+      div.a, div.b { display: -moz-flex; }
+
+      div.a { background: lightgreen; }
+      div.b { background: lightblue;  }
+
+      <!-- helper-classes for assigning pref / min / auto-width to our divs -->
+      div.prefWidth {
+        width: -moz-max-content;
+      }
+      div.minWidth {
+        width: -moz-min-content;
+      }
+      div.autoWidth {
+        width: auto;
+      }
+  </style>
+</head>
+<body>
+  <!-- both auto width -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
+       <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
+   </tr></table>
+
+   <!-- MIXING MIN WIDTH & AUTO -->
+   <!-- both min width -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
+       <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
+   </tr></table>
+   <!-- min,auto -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
+       <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
+   </tr></table>
+   <!-- auto,min -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
+       <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
+   </tr></table>
+
+   <!-- MIXING PREF WIDTH & AUTO -->
+   <!-- both prefWidth (NOTE: makes the table larger than it wants to be -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
+       <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
+   </tr></table>
+   <!-- pref,auto -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
+       <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
+   </tr></table>
+   <!-- auto,pref -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
+       <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
+   </tr></table>
+
+   <!-- MIXING PREF WIDTH & MIN WIDTH -->
+   <!-- min,pref -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
+       <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
+   </tr></table>
+   <!-- pref,min -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
+       <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
+   </tr></table>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1b.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1b.xhtml
new file mode 100644
index 000000000000..7ac1ec8ae409
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1b.xhtml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test has a number of tables, each with 2 flexboxes side-by-side,
+     whose "width" values depend on the flexbox's min and/or pref widths.
+
+     There's not enough space for both flexboxes to fit side-by-side, so their
+     width preferences must be balanced. This exercises
+     nsFlexContainerFrame::GetPrefWidth() & ::GetMinWidth().
+
+     IN EACH CASE, div.a has these intrinsic widths:
+       Pref width: 2*40 + 1*50 + 2*10 = 150px   (2*aaaa + 1*aaaaa + 2*space)
+       Min width: 50px  (width of "aaaaa")
+     and div.b has these intrinsic widths:
+       Pref width: 5*20 + 3*10 + 7*10 = 200px   (5*bb + 3*b + 7*space)
+       Min width: 20px  (width "bb")
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <link rel="stylesheet" type="text/css" href="ahem.css" />
+    <style>
+      table {
+        width: 300px;
+        font: 10px Ahem;
+        margin-bottom: 2px;
+        border: 1px dashed black;
+      }
+
+      div.a, div.b { display: -moz-flex; }
+
+      div.a { background: lightgreen; }
+      div.b { background: lightblue;  }
+
+      <!-- helper-classes for assigning pref / min / auto-width to our divs -->
+      div.prefWidth {
+        width: -moz-max-content;
+      }
+      div.minWidth {
+        width: -moz-min-content;
+      }
+      div.autoWidth {
+        width: auto;
+      }
+  </style>
+</head>
+<body>
+  <!-- both auto width -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a autoWidth"><div>aaaa aaaa aaaaa</div></div></td>
+       <td><div class="b autoWidth"><div>bb bb b bb bb b bb b</div></div></td>
+   </tr></table>
+
+   <!-- MIXING MIN WIDTH & AUTO -->
+   <!-- both min width -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a minWidth"><div>aaaa aaaa aaaaa</div></div></td>
+       <td><div class="b minWidth"><div>bb bb b bb bb b bb b</div></div></td>
+   </tr></table>
+   <!-- min,auto -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a minWidth"><div>aaaa aaaa aaaaa</div></div></td>
+       <td><div class="b autoWidth"><div>bb bb b bb bb b bb b</div></div></td>
+   </tr></table>
+   <!-- auto,min -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a autoWidth"><div>aaaa aaaa aaaaa</div></div></td>
+       <td><div class="b minWidth"><div>bb bb b bb bb b bb b</div></div></td>
+   </tr></table>
+
+   <!-- MIXING PREF WIDTH & AUTO -->
+   <!-- both prefWidth (NOTE: makes the table larger than it wants to be -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a prefWidth"><div>aaaa aaaa aaaaa</div></div></td>
+       <td><div class="b prefWidth"><div>bb bb b bb bb b bb b</div></div></td>
+   </tr></table>
+   <!-- pref,auto -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a prefWidth"><div>aaaa aaaa aaaaa</div></div></td>
+       <td><div class="b autoWidth"><div>bb bb b bb bb b bb b</div></div></td>
+   </tr></table>
+   <!-- auto,pref -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a autoWidth"><div>aaaa aaaa aaaaa</div></div></td>
+       <td><div class="b prefWidth"><div>bb bb b bb bb b bb b</div></div></td>
+   </tr></table>
+
+   <!-- MIXING PREF WIDTH & MIN WIDTH -->
+   <!-- min,pref -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a minWidth"><div>aaaa aaaa aaaaa</div></div></td>
+       <td><div class="b prefWidth"><div>bb bb b bb bb b bb b</div></div></td>
+   </tr></table>
+   <!-- pref,min -->
+   <table cellpadding="0" cellspacing="0"><tr>
+       <td><div class="a prefWidth"><div>aaaa aaaa aaaaa</div></div></td>
+       <td><div class="b minWidth"><div>bb bb b bb bb b bb b</div></div></td>
+   </tr></table>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2-ref.xhtml
new file mode 100644
index 000000000000..fe839bdd0c49
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2-ref.xhtml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This reference case has inline blocks in a div, in place of
+     flex items in a flex container.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      body { margin: 0; }
+
+      div.flexbox {
+        width: -moz-max-content;
+        /* We give the flex container a border and background so we can easily
+         * see how large it is. */
+        border: 2px dotted black;
+        background: lime;
+
+        font-size: 0; /* to prevent whitespace from having an effect */
+      }
+
+      div.wrapper {
+        display: inline-block;
+        border: 5px solid teal;
+        width:  40px;
+        height: 16px;
+      }
+      div.blueBlock {
+        width:  16px;
+        height: 16px;
+        background: rgb(0, 19, 127); /* matches solidblue.png */
+      }
+  </style>
+</head>
+<body>
+  <div class="flexbox">
+    <div class="wrapper"><div class="blueBlock"/></div>
+    <div class="wrapper"><div class="blueBlock"/></div>
+    <div class="wrapper"><div class="blueBlock"/></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2a.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2a.xhtml
new file mode 100644
index 000000000000..e1884a503715
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2a.xhtml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks how a flexbox sizes itself to shrinkwrap its contents'
+     preferred sizes.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      body { margin: 0; }
+      div.flexbox {
+        display: -moz-flex;
+        width: -moz-max-content;
+
+        /* We give the flexbox a border and background so we can easily see how
+         * large it is. */
+        border: 2px dotted black;
+        background: lime;
+      }
+
+      div.imgWrapper {
+        border: 5px solid teal;
+        width: 40px;
+        height: 16px;
+      }
+  </style>
+</head>
+<body>
+  <div class="flexbox">
+    <div class="imgWrapper"><img src="solidblue.png"/></div>
+    <div class="imgWrapper"><img src="solidblue.png"/></div>
+    <div class="imgWrapper"><img src="solidblue.png"/></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2b.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2b.xhtml
new file mode 100644
index 000000000000..30493f16b648
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2b.xhtml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test is like the -2a variant, but with a <div> instead of an <img>
+     at the deepest level of nesting.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      body { margin: 0; }
+
+      div.flexbox {
+        display: -moz-flex;
+        width: -moz-max-content;
+
+        /* We give the flex container a border and background so we can easily
+         * see how large it is. */
+        border: 2px dotted black;
+        background: lime;
+      }
+
+      div.wrapper {
+        border: 5px solid teal;
+        width:  40px;
+        height: 16px;
+      }
+      div.blueBlock {
+        width:  16px;
+        height: 16px;
+        background: rgb(0, 19, 127); /* matches solidblue.png */
+      }
+  </style>
+</head>
+<body>
+  <div class="flexbox">
+    <div class="wrapper"><div class="blueBlock"/></div>
+    <div class="wrapper"><div class="blueBlock"/></div>
+    <div class="wrapper"><div class="blueBlock"/></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-invalidation-1-ref.html b/layout/reftests/flexbox/flexbox-invalidation-1-ref.html
new file mode 100644
index 000000000000..e47b36e2d2be
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-invalidation-1-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+    Reference case, with testcase's dynamic tweak already performed.
+-->
+<html>
+  <head>
+    <style>
+      div#outer { margin-left: 40px }
+
+      div#flexContainer {
+        width: 100px;
+        height: 50px;
+        background: lightgray;
+        display: -moz-flex;
+        -moz-justify-content: center;
+      }
+
+      div#flexItem {
+        border: 1px solid black;
+        height: 200%;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="flexContainer">
+        <div id="flexItem">item</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-invalidation-1.html b/layout/reftests/flexbox/flexbox-invalidation-1.html
new file mode 100644
index 000000000000..04b267bffbe6
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-invalidation-1.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that we include our children's overflow areas in the
+     flex container's overflow area -- invalidating their old location and new
+     location when the flex container is moved, even if they stick outside the
+     flex container.
+-->
+<html class="reftest-wait">
+  <head>
+    <script>
+      function tweak() {
+        var outer = document.getElementById("outer");
+        outer.style.marginLeft = "40px";
+
+        document.documentElement.removeAttribute("class");
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+    <style>
+      div#flexContainer {
+        width: 100px;
+        height: 50px;
+        background: lightgray;
+        display: -moz-flex;
+        -moz-justify-content: center;
+      }
+
+      div#flexItem {
+        border: 1px solid black;
+        height: 200%;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="flexContainer">
+        <div id="flexItem">item</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-justify-content-horiz-1-ref.xhtml
new file mode 100644
index 000000000000..8c1a5e723993
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-horiz-1-ref.xhtml
@@ -0,0 +1,107 @@
+<?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>
+    <style>
+      div.flexbox {
+        margin-bottom: 2px;
+        line-height: 0;
+      }
+      div.flexbox > * {
+        display: inline-block;
+      }
+      div.a {
+        height: 20px;
+        width: 10px;
+        background: lightgreen;
+      }
+      div.b {
+        height: 20px;
+        width: 50px;
+        background: pink;
+      }
+      div.c {
+        height: 20px;
+        width: 100px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 190px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 140px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 95px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 70px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 20px"/><div class="b"/><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: 140px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"
+           /><div class="b" style="margin-left: 20px"
+           /><div class="c" style="margin-left: 20px"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 95px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 35px"
+           /><div class="b" style="margin-left: 70px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: -moz-calc(40px / 6)"
+           /><div class="b" style="margin-left: -moz-calc(40px / 3)"
+           /><div class="c" style="margin-left: -moz-calc(40px / 3)"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-horiz-1.xhtml b/layout/reftests/flexbox/flexbox-justify-content-horiz-1.xhtml
new file mode 100644
index 000000000000..78eb013e0676
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-horiz-1.xhtml
@@ -0,0 +1,102 @@
+<?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 variety of 'display: -moz-flex' examples
+     testing each possible value of the '-moz-justify-content' property. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        width: 200px;
+        display: -moz-flex;
+        margin-bottom: 2px;
+      }
+      div.a {
+        height: 20px;
+        -moz-flex: 0 10px;
+        background: lightgreen;
+      }
+      div.b {
+        height: 20px;
+        -moz-flex: 0 50px;
+        background: pink;
+      }
+      div.c {
+        height: 20px;
+        -moz-flex: 0 100px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-justify-content-horiz-2-ref.xhtml
new file mode 100644
index 000000000000..706d17839bc6
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-horiz-2-ref.xhtml
@@ -0,0 +1,121 @@
+<?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>
+    <style>
+      div.flexbox {
+        width: 200px;
+        line-height: 0;
+        margin-bottom: 4px;
+        border: 1px dotted black;
+      }
+      div.flexbox > * {
+        vertical-align: top;
+        display: inline-block;
+      }
+      div.a {
+        height: 10px;
+        width: 10px;
+        background: lightgreen;
+        border-style: solid;
+        border-color:     purple;
+        border-top-width:    1px;
+        border-right-width:  2px;
+        border-bottom-width: 3px;
+        border-left-width:   4px;
+        padding: 2px;
+      }
+      div.b {
+        height: 10px;
+        width: 50px;
+        background: pink;
+        padding: 4px 3px 2px 1px;
+        margin: 2px 3px 4px 5px;
+      }
+      div.c {
+        height: 10px;
+        width: 100px;
+        background: orange;
+        margin: 3px;
+        border: 2px dashed teal;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 180px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 118px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 8px"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 90px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 59px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 4px"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div style="margin-left: 118px"><div class="b"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"
+           /><div style="margin-left: 4px"><div class="b"/></div
+            ><div style="margin-left: 4px"><div class="c"/></div>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 90px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 29.5px"
+           /><div style="margin-left: 59px"><div class="b"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: -moz-calc(8px / 6)"
+           /><div style="margin-left: -moz-calc(8px / 3)"><div class="b"/></div
+            ><div style="margin-left: -moz-calc(8px / 3)"><div class="c"/></div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-horiz-2.xhtml b/layout/reftests/flexbox/flexbox-justify-content-horiz-2.xhtml
new file mode 100644
index 000000000000..26f4deaf80d9
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-horiz-2.xhtml
@@ -0,0 +1,115 @@
+<?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 flex containers testing each possible value of
+     the '-moz-justify-content' property, with margin/border/padding on the
+     flex items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        width: 200px;
+        display: -moz-flex;
+        margin-bottom: 4px;
+        border: 1px dotted black;
+      }
+      div.a {
+        height: 10px;
+        -moz-flex: 0 10px;
+        background: lightgreen;
+        border-style: solid;
+        border-color:     purple;
+        border-top-width:    1px;
+        border-right-width:  2px;
+        border-bottom-width: 3px;
+        border-left-width:   4px;
+        padding: 2px;
+      }
+      div.b {
+        height: 10px;
+        -moz-flex: 0 50px;
+        background: pink;
+        padding: 4px 3px 2px 1px;
+        margin: 2px 3px 4px 5px;
+      }
+      div.c {
+        height: 10px;
+        -moz-flex: 0 100px;
+        background: orange;
+        margin: 3px;
+        border: 2px dashed teal;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-horiz-3-ref.xhtml b/layout/reftests/flexbox/flexbox-justify-content-horiz-3-ref.xhtml
new file mode 100644
index 000000000000..4c3642bdbe61
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-horiz-3-ref.xhtml
@@ -0,0 +1,103 @@
+<?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>
+    <style>
+      body { margin-left: 0px; } /* We'll apply margins w/ style attribute */
+      div.flexbox {
+        margin-bottom: 2px;
+        line-height: 0;
+      }
+      div.flexbox > * {
+        display: inline-block;
+      }
+      div.a {
+        height: 20px;
+        width: 35px;
+        background: lightgreen;
+      }
+      div.b {
+        height: 20px;
+        width: 40px;
+        background: pink;
+      }
+      div.c {
+        height: 20px;
+        width: 45px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="margin-left: 95px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 55px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 10px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="margin-left: 97.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 77.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 55px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="margin-left: 97.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 77.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 55px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-horiz-3.xhtml b/layout/reftests/flexbox/flexbox-justify-content-horiz-3.xhtml
new file mode 100644
index 000000000000..440486aff10d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-horiz-3.xhtml
@@ -0,0 +1,110 @@
+<?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 variety of 'display: -moz-flex' examples testing each
+     possible value of the '-moz-justify-content' property, and with each
+     individual flex item being wider than the flexbox itself (so that
+     there isn't any packing space available).
+       * For 'flex-start'/'space-between', we should overflow on the end
+         (right) side.
+       * For 'flex-end', we should overflow on the start (left) side.
+       * For 'center'/'space-around', we should overflow equally on both sides.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      body { margin-left: 100px; } /* So we can see left-overflowed stuff */
+      div.flexbox {
+        width: 30px;
+        display: -moz-flex;
+        margin-bottom: 2px;
+      }
+      div.a {
+        height: 20px;
+        -moz-flex: 0 0 35px;
+        background: lightgreen;
+      }
+      div.b {
+        height: 20px;
+        -moz-flex: 0 0 40px;
+        background: pink;
+      }
+      div.c {
+        height: 20px;
+        -moz-flex: 0 0 45px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-horiz-4-ref.xhtml b/layout/reftests/flexbox/flexbox-justify-content-horiz-4-ref.xhtml
new file mode 100644
index 000000000000..a3adc5f859cf
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-horiz-4-ref.xhtml
@@ -0,0 +1,115 @@
+<?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>
+    <style>
+      body { margin-left: 0px; } /* We'll apply margins w/ style attribute */
+      div.flexbox {
+        line-height: 0;
+        margin-bottom: 4px;
+      }
+      div.flexbox > * {
+        vertical-align: top;
+        display: inline-block;
+      }
+      div.a {
+        height: 10px;
+        width: 35px;
+        background: lightgreen;
+        border-style: solid;
+        border-color:     purple;
+        border-top-width:    1px;
+        border-right-width:  2px;
+        border-bottom-width: 3px;
+        border-left-width:   4px;
+        padding: 2px;
+      }
+      div.b {
+        height: 10px;
+        width: 40px;
+        background: pink;
+        padding: 4px 3px 2px 1px;
+        margin: 2px 3px 4px 5px;
+      }
+      div.c {
+        height: 10px;
+        width: 45px;
+        background: orange;
+        margin: 3px;
+        border: 2px dashed teal;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="margin-left: 85px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 33px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: -22px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="margin-left: 92.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 66.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 39px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="margin-left: 92.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 66.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 39px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-horiz-4.xhtml b/layout/reftests/flexbox/flexbox-justify-content-horiz-4.xhtml
new file mode 100644
index 000000000000..1a01ea252343
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-horiz-4.xhtml
@@ -0,0 +1,121 @@
+<?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 variety of 'display: -moz-flex' examples testing each
+     possible value of the '-moz-justify-content' property, and with each
+     individual flex item being wider than the flexbox itself (so that
+     there isn't any packing space available).
+       * For 'flex-start'/'space-between', we should overflow on the end
+         (right) side.
+       * For 'flex-end', we should overflow on the start (left) side.
+       * For 'center'/'space-around', we should overflow equally on both sides.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      body { margin-left: 100px; } /* So we can see left-overflowed stuff */
+      div.flexbox {
+        width: 30px;
+        display: -moz-flex;
+        margin-bottom: 4px;
+      }
+      div.a {
+        height: 10px;
+        -moz-flex: 0 0 35px;
+        background: lightgreen;
+        border-style: solid;
+        border-color:     purple;
+        border-top-width:    1px;
+        border-right-width:  2px;
+        border-bottom-width: 3px;
+        border-left-width:   4px;
+        padding: 2px;
+      }
+      div.b {
+        height: 10px;
+        -moz-flex: 0 0 40px;
+        background: pink;
+        padding: 4px 3px 2px 1px;
+        margin: 2px 3px 4px 5px;
+      }
+      div.c {
+        height: 10px;
+        -moz-flex: 0 0 45px;
+        background: orange;
+        margin: 3px;
+        border: 2px dashed teal;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-horiz-5-ref.xhtml b/layout/reftests/flexbox/flexbox-justify-content-horiz-5-ref.xhtml
new file mode 100644
index 000000000000..247cb88928b9
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-horiz-5-ref.xhtml
@@ -0,0 +1,128 @@
+<?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>
+    <style>
+      div.flexbox {
+        margin-bottom: 2px;
+        line-height: 0;
+      }
+      div.flexbox > * {
+        display: inline-block;
+      }
+      div.a {
+        height: 20px;
+        width: 10px;
+        background: lightgreen;
+      }
+      div.b {
+        height: 20px;
+        width: 50px;
+        background: pink;
+      }
+      div.c {
+        height: 20px;
+        width: 100px;
+        background: orange;
+      }
+      .center {
+        width: -moz-max-content;
+        margin-left: auto;
+        margin-right: auto;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="float:right; clear:right;">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="float:right; clear:right;">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="float:right; clear:right;">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+    <div style="clear:right;"></div>
+
+    <!-- center -->
+    <div class="flexbox center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b" style="float: right"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="display:block; float: left"/>
+      <div class="c" style="float:right"/>
+      <!-- Use fixed-size margins to subtract space for "a" and "c", and then
+           use auto margins to center 'b' within the remaining space -->
+      <div style="display: block; margin-left: 10px; margin-right: 100px">
+        <div class="b center"/>
+      </div>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox center">
+      <div class="a"/>
+    </div>
+    <!-- For these, we use a flex container with invisible flexible items
+         instead of packing space. That's simpler than trying to hack up
+         a width-independent reference case for "justify-content:space-around".
+         (There are other reftests to ensure that basic flex container
+         behavior is correct, so it's safe to rely on that.) -->
+    <div class="flexbox" style="display: -moz-flex">
+      <div style="-moz-flex: 0.5"/>
+      <div class="a"/>
+      <div style="-moz-flex: 1"/>
+      <div class="b"/>
+      <div style="-moz-flex: 0.5"/>
+    </div>
+    <div class="flexbox" style="display: -moz-flex">
+      <div style="-moz-flex: 0.5"/>
+      <div class="a"/>
+      <div style="-moz-flex: 1"/>
+      <div class="b"/>
+      <div style="-moz-flex: 1"/>
+      <div class="c"/>
+      <div style="-moz-flex: 0.5"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-horiz-5.xhtml b/layout/reftests/flexbox/flexbox-justify-content-horiz-5.xhtml
new file mode 100644
index 000000000000..07f3006a3d69
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-horiz-5.xhtml
@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase to exercise each possible value of the '-moz-justify-content'
+     property, in an auto-sized horizontal flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        display: -moz-flex;
+        margin-bottom: 2px;
+      }
+      div.a {
+        height: 20px;
+        -moz-flex: 0 10px;
+        background: lightgreen;
+      }
+      div.b {
+        height: 20px;
+        -moz-flex: 0 50px;
+        background: pink;
+      }
+      div.c {
+        height: 20px;
+        -moz-flex: 0 100px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-vert-1-ref.xhtml b/layout/reftests/flexbox/flexbox-justify-content-vert-1-ref.xhtml
new file mode 100644
index 000000000000..7247220a8e62
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-vert-1-ref.xhtml
@@ -0,0 +1,105 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 200px;
+        margin-right: 2px;
+        float: left;
+      }
+      div.a {
+        width: 20px;
+        height: 10px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        height: 50px;
+        background: pink;
+      }
+      div.c {
+        width: 20px;
+        height: 100px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 190px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 140px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 40px"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 95px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 70px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 20px"/><div class="b"/><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: 140px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"
+           /><div class="b" style="margin-top: 20px"
+           /><div class="c" style="margin-top: 20px"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 95px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 35px"
+           /><div class="b" style="margin-top: 70px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: -moz-calc(40px / 6)"
+           /><div class="b" style="margin-top: -moz-calc(40px / 3)"
+           /><div class="c" style="margin-top: -moz-calc(40px / 3)"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-vert-1.xhtml b/layout/reftests/flexbox/flexbox-justify-content-vert-1.xhtml
new file mode 100644
index 000000000000..531abdc6d5be
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-vert-1.xhtml
@@ -0,0 +1,104 @@
+<?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 flex containers, testing each possible value of
+     the '-moz-justify-content' property. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 200px;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+        margin-right: 2px;
+        float: left;
+      }
+      div.a {
+        width: 20px;
+        -moz-flex: 0 10px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        -moz-flex: 0 50px;
+        background: pink;
+      }
+      div.c {
+        width: 20px;
+        -moz-flex: 0 100px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-vert-2-ref.xhtml b/layout/reftests/flexbox/flexbox-justify-content-vert-2-ref.xhtml
new file mode 100644
index 000000000000..1d4ee2b424a3
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-vert-2-ref.xhtml
@@ -0,0 +1,118 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 200px;
+        margin-right: 2px;
+        border: 1px dotted black;
+        float: left;
+      }
+      div.a {
+        width: 10px;
+        height: 10px;
+        background: lightgreen;
+        border-style: solid;
+        border-color:     purple;
+        border-top-width:    4px;
+        border-right-width:  3px;
+        border-bottom-width: 2px;
+        border-left-width:   1px;
+        padding: 2px;
+      }
+      div.b {
+        width: 10px;
+        height: 50px;
+        background: pink;
+        padding: 1px 2px 3px 4px;
+        margin: 5px 4px 3px 2px;
+      }
+      div.c {
+        width: 10px;
+        height: 100px;
+        background: orange;
+        margin: 3px;
+        margin-top: 6px; /* Increased to counteract for collapsing */
+        border: 2px dashed teal;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 180px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 118px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 8px"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 90px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 59px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 4px"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div style="margin-top: 123px"><div class="b"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"
+           /><div style="margin-top: 9px"><div class="b"/></div
+            ><div style="margin-top: 10px"><div class="c"/></div>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 90px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 29.5px"
+           /><div style="margin-top: 64px"><div class="b"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: -moz-calc(8px / 6)"
+           /><div style="margin-top: -moz-calc(5px + 8px / 3)"><div class="b"/></div
+            ><div style="margin-top: -moz-calc(6px + 8px / 3)"><div class="c"/></div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-vert-2.xhtml b/layout/reftests/flexbox/flexbox-justify-content-vert-2.xhtml
new file mode 100644
index 000000000000..28f5b8a49dce
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-vert-2.xhtml
@@ -0,0 +1,117 @@
+<?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 flex containers testing each possible value of
+     the '-moz-justify-content' property, with margin/border/padding on the
+     flex items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 200px;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+        margin-right: 2px;
+        float: left;
+        border: 1px dotted black;
+      }
+      div.a {
+        width: 10px;
+        -moz-flex: 0 10px;
+        background: lightgreen;
+        border-style: solid;
+        border-color:     purple;
+        border-top-width:    4px;
+        border-right-width:  3px;
+        border-bottom-width: 2px;
+        border-left-width:   1px;
+        padding: 2px;
+      }
+      div.b {
+        width: 10px;
+        -moz-flex: 0 50px;
+        background: pink;
+        padding: 1px 2px 3px 4px;
+        margin: 5px 4px 3px 2px;
+      }
+      div.c {
+        width: 10px;
+        -moz-flex: 0 100px;
+        background: orange;
+        margin: 3px;
+        border: 2px dashed teal;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-vert-3-ref.xhtml b/layout/reftests/flexbox/flexbox-justify-content-vert-3-ref.xhtml
new file mode 100644
index 000000000000..611af76ab43e
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-vert-3-ref.xhtml
@@ -0,0 +1,101 @@
+<?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>
+    <style>
+      body { margin-top: 0px; } /* We'll apply margins w/ style attribute */
+      div.flexbox {
+        height: 200px;
+        margin-right: 2px;
+        float: left;
+      }
+      div.a {
+        width: 20px;
+        height: 35px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        height: 40px;
+        background: pink;
+      }
+      div.c {
+        width: 20px;
+        height: 45px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="margin-top: 95px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 55px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 10px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="margin-top: 97.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 77.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 55px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="margin-top: 97.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 77.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 55px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-vert-3.xhtml b/layout/reftests/flexbox/flexbox-justify-content-vert-3.xhtml
new file mode 100644
index 000000000000..714048bb99e2
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-vert-3.xhtml
@@ -0,0 +1,113 @@
+<?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 testing each possible
+     value of the '-moz-justify-content' property, and with each individual
+     flex item being larger than the flexbox itself (so that there isn't any
+     packing space available).
+
+       * For 'flex-start'/'space-between', we should overflow on the end
+         (bottom) side.
+       * For 'flex-end', we should overflow on the start (top) side.
+       * For 'center'/'space-around', we should overflow equally on both sides.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      body { margin-top: 100px; } /* So we can see top-overflowed stuff */
+      div.flexbox {
+        height: 30px;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+        margin-right: 2px;
+        float: left;
+      }
+      div.a {
+        width: 20px;
+        -moz-flex: 0 0 35px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        -moz-flex: 0 0 40px;
+        background: pink;
+      }
+      div.c {
+        width: 20px;
+        -moz-flex: 0 0 45px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-vert-4-ref.xhtml b/layout/reftests/flexbox/flexbox-justify-content-vert-4-ref.xhtml
new file mode 100644
index 000000000000..e6fa126d90e1
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-vert-4-ref.xhtml
@@ -0,0 +1,112 @@
+<?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>
+    <style>
+      body { margin-top: 0px; } /* We'll apply margins w/ style attribute */
+      div.flexbox {
+        margin-right: 4px;
+        float: left;
+      }
+      div.a {
+        width: 10px;
+        height: 35px;
+        background: lightgreen;
+        border-style: solid;
+        border-color:     purple;
+        border-top-width:    4px;
+        border-right-width:  3px;
+        border-bottom-width: 2px;
+        border-left-width:   1px;
+        padding: 2px;
+      }
+      div.b {
+        width: 10px;
+        height: 40px;
+        background: pink;
+        padding: 1px 2px 3px 4px;
+        margin: 5px 4px 3px 2px;
+      }
+      div.c {
+        width: 10px;
+        height: 45px;
+        background: orange;
+        margin: 3px;
+        margin-top: 6px; /* Increased to counteract for collapsing */
+        border: 2px dashed teal;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="margin-top: 85px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 33px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: -22px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="margin-top: 92.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 66.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 39px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="margin-top: 92.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 66.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 39px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-vert-4.xhtml b/layout/reftests/flexbox/flexbox-justify-content-vert-4.xhtml
new file mode 100644
index 000000000000..867eb1a85850
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-vert-4.xhtml
@@ -0,0 +1,124 @@
+<?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, testing each possible
+     value of the '-moz-justify-content' property, and with each individual
+     flex item being larger than the flexbox itself (so that there isn't any
+     packing space available).  Also, we've got margin/border/padding on the
+     flex items.
+       * For 'flex-start'/'space-between', we should overflow on the end
+         (bottom) side.
+       * For 'flex-end', we should overflow on the start (top) side.
+       * For 'center'/'space-around', we should overflow equally on both sides.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      body { margin-top: 100px; } /* So we can see top-overflowed stuff */
+      div.flexbox {
+        height: 30px;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+        margin-right: 4px;
+        float: left;
+      }
+      div.a {
+        width: 10px;
+        -moz-flex: 0 0 35px;
+        background: lightgreen;
+        border-style: solid;
+        border-color:     purple;
+        border-top-width:    4px;
+        border-right-width:  3px;
+        border-bottom-width: 2px;
+        border-left-width:   1px;
+        padding: 2px;
+      }
+      div.b {
+        width: 10px;
+        -moz-flex: 0 0 40px;
+        background: pink;
+        padding: 1px 2px 3px 4px;
+        margin: 5px 4px 3px 2px;
+      }
+      div.c {
+        width: 10px;
+        -moz-flex: 0 0 45px;
+        background: orange;
+        margin: 3px;
+        border: 2px dashed teal;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-vert-5-ref.xhtml b/layout/reftests/flexbox/flexbox-justify-content-vert-5-ref.xhtml
new file mode 100644
index 000000000000..10e402949dad
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-vert-5-ref.xhtml
@@ -0,0 +1,100 @@
+<?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>
+    <style>
+      div.flexbox {
+        margin-right: 2px;
+        float: left;
+        border: 1px dotted black;
+      }
+      div.a {
+        width: 20px;
+        height: 10px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        height: 50px;
+        background: pink;
+      }
+      div.c {
+        width: 20px;
+        height: 100px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-justify-content-vert-5.xhtml b/layout/reftests/flexbox/flexbox-justify-content-vert-5.xhtml
new file mode 100644
index 000000000000..8cc65d951870
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-justify-content-vert-5.xhtml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase to exercise each possible value of the '-moz-justify-content'
+     property, in an auto-sized vertical flex container.  The flex container
+     should shrink-wrap its contents' heights, leaving no packing space
+     available.  So, the "-moz-justify-content" values should have no effect
+     in this testcase. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        display: -moz-flex;
+        -moz-flex-direction: column;
+        margin-right: 2px;
+        float: left;
+        border: 1px dotted black;
+      }
+      div.a {
+        width: 20px;
+        -moz-flex: 0 10px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        -moz-flex: 0 50px;
+        background: pink;
+      }
+      div.c {
+        width: 20px;
+        -moz-flex: 0 100px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="-moz-justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-margin-auto-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-margin-auto-horiz-1-ref.xhtml
new file mode 100644
index 000000000000..77938ca03cfa
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-margin-auto-horiz-1-ref.xhtml
@@ -0,0 +1,85 @@
+<?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>
+    <style>
+      div { height: 20px; }
+      div.flexbox {
+        width: 200px;
+        background: lightgray;
+        margin-bottom: 2px;
+      }
+      div.a {
+        width: 20px;
+        background: green;
+        display: inline-block;
+      }
+      div.b {
+        width: 20px;
+        background: pink;
+        display: inline-block;
+      }
+      div.c {
+        width: 20px;
+        background: purple;
+        display: inline-block;
+      }
+
+      <!-- These classes allow us to conveniently/concisely specify margin
+           values below, for exact positioning of the items on each reference
+           line. ("l" = "margin-_l_eft", and the number = number of pixels) -->
+      div.l180 { margin-left: 180px }
+      div.l90  { margin-left:  90px }
+      div.l80  { margin-left:  80px }
+      div.l70  { margin-left:  70px }
+      div.l53  { margin-left: -moz-calc(160px / 3) } <!-- == 53.33333px -->
+      div.l35  { margin-left:  35px }
+    </style>
+  </head>
+  <body>
+    <!-- just one item -->
+    <div class="flexbox">
+      <div class="a l180"/>
+    </div>
+    <div class="flexbox">
+      <div class="b l90"/>
+    </div>
+    <div class="flexbox">
+      <div class="c"/>
+    </div>
+
+    <!-- Two items -->
+    <div class="flexbox">
+      <div class="a l53"/><div class="b l53"/>
+    </div>
+    <div class="flexbox">
+      <div class="a l80"/><div class="c"/>
+    </div>
+    <div class="flexbox">
+      <div class="b l53"/><div class="c l53"/>
+    </div>
+
+    <!-- Three items -->
+    <div class="flexbox">
+      <div class="a l35"/><div class="b l35"/><div class="c l35"/>
+    </div>
+    <div class="flexbox">
+      <div class="a l35"/><div class="c"/><div class="b l70"/>
+    </div>
+    <div class="flexbox">
+      <div class="b l35"/><div class="a l70"/><div class="c"/>
+    </div>
+    <div class="flexbox">
+      <div class="b l35"/><div class="c l35"/><div class="a l70"/>
+    </div>
+    <div class="flexbox">
+      <div class="c"/><div class="a l70"/><div class="b l35"/>
+    </div>
+    <div class="flexbox">
+      <div class="c"/><div class="b l70"/><div class="a l70"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-margin-auto-horiz-1.xhtml b/layout/reftests/flexbox/flexbox-margin-auto-horiz-1.xhtml
new file mode 100644
index 000000000000..452b418837d6
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-margin-auto-horiz-1.xhtml
@@ -0,0 +1,79 @@
+<?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 variety of 'display: -moz-flex' examples
+     with margin-left and/or margin-right set to 'auto'. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        width: 200px;
+        height: 20px;
+        background: lightgray;
+        display: -moz-flex;
+        margin-bottom: 2px;
+      }
+      div.a {
+        width: 20px;
+        background: green;
+        margin-left: auto;
+      }
+      div.b {
+        width: 20px;
+        background: pink;
+        margin-left: auto;
+        margin-right: auto;
+      }
+      div.c {
+        width: 20px;
+        background: purple;
+        margin-right: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- just one item -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="c"/>
+    </div>
+
+    <!-- Two items -->
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="c"/>
+    </div>
+    <div class="flexbox">
+      <div class="b"/><div class="c"/>
+    </div>
+
+    <!-- Three items -->
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="c"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="b"/><div class="a"/><div class="c"/>
+    </div>
+    <div class="flexbox">
+      <div class="b"/><div class="c"/><div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="c"/><div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="c"/><div class="b"/><div class="a"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-margin-auto-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-margin-auto-horiz-2-ref.xhtml
new file mode 100644
index 000000000000..04ab79554bd2
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-margin-auto-horiz-2-ref.xhtml
@@ -0,0 +1,59 @@
+<?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 variety of 'display: -moz-flex' examples
+     with margin-top and/or margin-bottom set to 'auto' on flex items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        border: 2px dotted black;
+        display: -moz-flex;
+        margin-bottom: 2px;
+        width: 100px;
+      }
+      div.fixedSize {
+        width:  20px;
+        height: 20px;
+      }
+      div.gray        { background: gray;  }
+      div.green       { background: green; }
+      div.pink        { background: pink;  }
+      div.blue        { background: blue;  }
+    </style>
+  </head>
+  <body>
+
+    <!-- fixed-height flexbox, with items that have auto margins -->
+    <div class="flexbox" style="height: 100px">
+      <div class="fixedSize green" style="margin-top: 80px"/>
+      <div class="fixedSize pink"/>
+      <div class="fixedSize blue"  style="margin-top: 40px"/>
+    </div>
+    <!-- fixed-height flexbox, with items that have auto & fixed margins -->
+    <div class="flexbox" style="height: 100px">
+      <div class="fixedSize green" style="margin-top: 70px"/>
+      <div class="fixedSize pink"  style="margin-top: 10px"/>
+    </div>
+
+    <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins,
+         with other items that have auto margins -->
+    <div class="flexbox" style="height: 50px">
+      <div class="fixedSize green" style="margin-top: 30px"/>
+      <div class="fixedSize pink"/>
+      <div class="fixedSize blue"  style="margin-top: 15px"/>
+      <div class="gray" style="width: 10px; height: 30px; margin-top: 10px"/>
+    </div>
+
+    <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins,
+         with other items that have auto & fixed margins -->
+    <div class="flexbox" style="height: 50px">
+      <div class="fixedSize green" style="margin-top: 20px"/>
+      <div class="fixedSize pink"  style="margin-top: 10px"/>
+      <div class="gray" style="width: 10px; height: 30px; margin-top: 10px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-margin-auto-horiz-2.xhtml b/layout/reftests/flexbox/flexbox-margin-auto-horiz-2.xhtml
new file mode 100644
index 000000000000..ec834ad080f7
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-margin-auto-horiz-2.xhtml
@@ -0,0 +1,64 @@
+<?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 variety of 'display: -moz-flex' examples
+     with margin-top and/or margin-bottom set to 'auto' on flex items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        border: 2px dotted black;
+        display: -moz-flex;
+        margin-bottom: 2px;
+        width: 100px;
+      }
+      div.fixedSize {
+        width:  20px;
+        height: 20px;
+      }
+      div.gray        { background: gray;  }
+      div.green       { background: green; }
+      div.pink        { background: pink;  }
+      div.blue        { background: blue;  }
+
+      div.autoTop     { margin-top:    auto; }
+      div.autoBottom  { margin-bottom: auto; }
+      div.fixedTop    { margin-top:    10px; }
+      div.fixedBottom { margin-bottom: 10px; }
+    </style>
+  </head>
+  <body>
+
+    <!-- fixed-height flexbox, with items that have auto margins -->
+    <div class="flexbox" style="height: 100px">
+      <div class="fixedSize green autoTop"/>
+      <div class="fixedSize pink  autoBottom"/>
+      <div class="fixedSize blue  autoTop autoBottom"/>
+    </div>
+    <!-- fixed-height flexbox, with items that have auto & fixed margins -->
+    <div class="flexbox" style="height: 100px">
+      <div class="fixedSize green autoTop fixedBottom"/>
+      <div class="fixedSize pink  autoBottom fixedTop"/>
+    </div>
+
+    <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins,
+         with other items that have auto margins -->
+    <div class="flexbox">
+      <div class="fixedSize green autoTop"/>
+      <div class="fixedSize pink autoBottom"/>
+      <div class="fixedSize blue autoTop autoBottom"/>
+      <div class="fixedTop fixedBottom gray" style="width: 10px; height: 30px"/>
+    </div>
+
+    <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins,
+         with other items that have auto & fixed margins -->
+    <div class="flexbox">
+      <div class="fixedSize green autoTop fixedBottom"/>
+      <div class="fixedSize pink  autoBottom fixedTop"/>
+      <div class="fixedTop fixedBottom gray" style="width: 10px; height: 30px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-mbp-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-mbp-horiz-1-ref.xhtml
new file mode 100644
index 000000000000..d3df9d9644ac
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-1-ref.xhtml
@@ -0,0 +1,69 @@
+<?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>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+      }
+      div.a {
+        display: inline-block;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.b {
+        display: inline-block;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+      div.c {
+        display: inline-block;
+        background: orange;
+      }
+      div.flexNone {
+        display: inline-block;
+        background: pink;
+      }
+      div.flexBasis {
+        display: inline-block;
+        background: gray;
+      }
+      div.spacer {
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="a" style="width: 74px"/><div class="b" style="width: 110px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="width: 56.5px"/><div class="c" style="width: 137.5px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="width: 179px"/><div class="flexNone">
+        <div class="spacer" style="width: 15px"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="width: 66px"/><div class="c" style="width: 124px"/>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="width: 160px"/><div class="flexNone">
+        <div class="spacer" style="width: 30px"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="width: 39px"/><div class="b" style="width: 40px"
+      /><div class="flexBasis" style="width: 20px"/><div class="c" style="width: 85px"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-mbp-horiz-1-reverse-ref.xhtml b/layout/reftests/flexbox/flexbox-mbp-horiz-1-reverse-ref.xhtml
new file mode 100644
index 000000000000..9dff0ef0dca1
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-1-reverse-ref.xhtml
@@ -0,0 +1,72 @@
+<?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>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+      }
+      div.a {
+        display: inline-block;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.b {
+        display: inline-block;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+      div.c {
+        display: inline-block;
+        background: orange;
+      }
+      div.flexNone {
+        display: inline-block;
+        background: pink;
+      }
+      div.flexBasis {
+        display: inline-block;
+        background: gray;
+      }
+      div.spacer {
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="b" style="width: 110px"/><div class="a" style="width: 74px"/>
+    </div>
+    <div class="flexbox">
+      <div class="c" style="width: 137.5px"/><div class="a" style="width: 56.5px"/>
+    </div>
+    <div class="flexbox">
+      <div class="flexNone"><div class="spacer" style="width: 15px"/>
+      </div><div class="a" style="width: 179px"/>
+    </div>
+    <div class="flexbox">
+      <div class="c" style="width: 124px"
+      /><div class="b" style="width: 66px"/>
+    </div>
+    <div class="flexbox">
+      <div class="flexNone"><div class="spacer" style="width: 30px"/>
+      </div><div class="b" style="width: 160px"/>
+    </div>
+    <div class="flexbox">
+      <div class="c" style="width: 85px"
+      /><div class="flexBasis" style="width: 20px"
+      /><div class="b" style="width: 40px"
+      /><div class="a" style="width: 39px"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-mbp-horiz-1-reverse.xhtml b/layout/reftests/flexbox/flexbox-mbp-horiz-1-reverse.xhtml
new file mode 100644
index 000000000000..37a2590e7eb4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-1-reverse.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with borders on flex items, and "flex-direction: row-reverse" to
+     reverse the flex container's main axis. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        font-size: 10px;
+        display: -moz-flex;
+        -moz-flex-direction: row-reverse;
+      }
+      div.a {
+        -moz-flex: 1 0 24px;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.b {
+        -moz-flex: 2 0 10px;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+      div.c {
+        -moz-flex: 3 0 40px;
+        background: orange;
+      }
+      div.flexNone {
+        -moz-flex: none;
+        background: pink;
+      }
+      div.flexBasis {
+        -moz-flex: 0 0 20px;
+        background: gray;
+      }
+      div.spacer {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-mbp-horiz-1-rtl-reverse.xhtml b/layout/reftests/flexbox/flexbox-mbp-horiz-1-rtl-reverse.xhtml
new file mode 100644
index 000000000000..785a9583a1d3
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-1-rtl-reverse.xhtml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with borders on flex items, and "direction: rtl" and
+     "flex-direction: row-reverse" to *doubly* reverse the flex container's
+     main axis. --> 
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        font-size: 10px;
+        display: -moz-flex;
+        -moz-flex-direction: row-reverse;
+        direction: rtl;
+      }
+      div.a {
+        -moz-flex: 1 0 24px;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.b {
+        -moz-flex: 2 0 10px;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+      div.c {
+        -moz-flex: 3 0 40px;
+        background: orange;
+      }
+      div.flexNone {
+        -moz-flex: none;
+        background: pink;
+      }
+      div.flexBasis {
+        -moz-flex: 0 0 20px;
+        background: gray;
+      }
+      div.spacer {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-mbp-horiz-1-rtl.xhtml b/layout/reftests/flexbox/flexbox-mbp-horiz-1-rtl.xhtml
new file mode 100644
index 000000000000..0971bcea45eb
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-1-rtl.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with borders on flex items, and "direction: rtl" to reverse
+     the flex container's main axis. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        font-size: 10px;
+        display: -moz-flex;
+        direction: rtl;
+      }
+      div.a {
+        -moz-flex: 1 0 24px;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.b {
+        -moz-flex: 2 0 10px;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+      div.c {
+        -moz-flex: 3 0 40px;
+        background: orange;
+      }
+      div.flexNone {
+        -moz-flex: none;
+        background: pink;
+      }
+      div.flexBasis {
+        -moz-flex: 0 0 20px;
+        background: gray;
+      }
+      div.spacer {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-mbp-horiz-1.xhtml b/layout/reftests/flexbox/flexbox-mbp-horiz-1.xhtml
new file mode 100644
index 000000000000..1f6a735ae00b
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-1.xhtml
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with borders on flex items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        font-size: 10px;
+        display: -moz-flex;
+      }
+      div.a {
+        -moz-flex: 1 0 24px;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.b {
+        -moz-flex: 2 0 10px;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+      div.c {
+        -moz-flex: 3 0 40px;
+        background: orange;
+      }
+      div.flexNone {
+        -moz-flex: none;
+        background: pink;
+      }
+      div.flexBasis {
+        -moz-flex: 0 0 20px;
+        background: gray;
+      }
+      div.spacer {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-mbp-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-mbp-horiz-2-ref.xhtml
new file mode 100644
index 000000000000..4179967d84c9
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-2-ref.xhtml
@@ -0,0 +1,73 @@
+<?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>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+      }
+      div.a {
+        display: inline-block;
+        background: lightgreen;
+        margin-left: 1px;
+        margin-right: 3px;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.b {
+        display: inline-block;
+        background: yellow;
+        margin-left: 2px;
+        margin-right: 4px;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+      div.c {
+        display: inline-block;
+        background: orange;
+      }
+      div.flexNone {
+        display: inline-block;
+        background: pink;
+      }
+      div.flexBasis {
+        display: inline-block;
+        background: gray;
+      }
+      div.spacer {
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="a" style="width: 70px"/><div class="b" style="width: 104px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="width: 52.5px"/><div class="c" style="width: 137.5px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="width: 175px"/><div class="flexNone">
+        <div class="spacer" style="width: 15px"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="width: 60px"/><div class="c" style="width: 124px"/>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="width: 154px"/><div class="flexNone">
+        <div class="spacer" style="width: 30px"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="width: 35px"/><div class="b" style="width: 34px"
+      /><div class="flexBasis" style="width: 20px"/><div class="c" style="width: 85px"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-mbp-horiz-2a.xhtml b/layout/reftests/flexbox/flexbox-mbp-horiz-2a.xhtml
new file mode 100644
index 000000000000..881d9e6c95e0
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-2a.xhtml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with margin/border on flex items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        font-size: 10px;
+        display: -moz-flex;
+      }
+      div.a {
+        -moz-flex: 1 0 20px;
+        background: lightgreen;
+        margin-left: 1px;
+        margin-right: 3px;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.b {
+        -moz-flex: 2 0 4px;
+        background: yellow;
+        margin-left: 2px;
+        margin-right: 4px;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+      div.c {
+        -moz-flex: 3 0 40px;
+        background: orange;
+      }
+      div.flexNone {
+        -moz-flex: none;
+        background: pink;
+      }
+      div.flexBasis {
+        -moz-flex: 0 0 20px;
+        background: gray;
+      }
+      div.spacer {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-mbp-horiz-2b.xhtml b/layout/reftests/flexbox/flexbox-mbp-horiz-2b.xhtml
new file mode 100644
index 000000000000..49938936fc13
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-2b.xhtml
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with margin/border/padding on flex items. (NOTE: This renders
+     the same as the "-2a" variant, which lacks padding, because we've
+     just replaced some of the "-2a" variant's content-box area with
+     padding-box area in this test.) -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        font-size: 10px;
+        display: -moz-flex;
+      }
+      div.a {
+        -moz-flex: 1 0 9px;
+        background: lightgreen;
+        margin-left: 1px;
+        margin-right: 3px;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+        padding-left: 5px;
+        padding-right: 6px;
+      }
+      div.b {
+        -moz-flex: 2 0 1px;
+        background: yellow;
+        margin-left: 2px;
+        margin-right: 4px;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+        padding-left: 1px;
+        padding-right: 2px;
+      }
+      div.c {
+        -moz-flex: 3 0 40px;
+        background: orange;
+      }
+      div.flexNone {
+        -moz-flex: none;
+        background: pink;
+      }
+      div.flexBasis {
+        -moz-flex: 0 0 20px;
+        background: gray;
+      }
+      div.spacer {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-mbp-horiz-3-ref.xhtml b/layout/reftests/flexbox/flexbox-mbp-horiz-3-ref.xhtml
new file mode 100644
index 000000000000..f6835b5f2dd5
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-3-ref.xhtml
@@ -0,0 +1,79 @@
+<?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>
+    <style>
+      div { height: 20px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        margin-bottom: 2px;
+      }
+
+      <!-- customizations for flexbox border/padding -->
+      .borderA {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 6px;
+        border-right-width: 4px;
+        border-bottom-width: 2px;
+        border-left-width: 8px;
+      }
+
+      .borderB {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 4px;
+        border-right-width: 5px;
+        border-bottom-width: 6px;
+        border-left-width: 7px;
+      }
+
+      .paddingA {
+        padding: 4px 3px 2px 1px;
+      }
+
+      .paddingB {
+        padding: 8px 11px 14px 17px;
+      }
+
+      div.child1 {
+        display: inline-block;
+        width: 74px;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.child2 {
+        display: inline-block;
+        width: 110px;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox borderA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderA paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderA paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-mbp-horiz-3-reverse-ref.xhtml b/layout/reftests/flexbox/flexbox-mbp-horiz-3-reverse-ref.xhtml
new file mode 100644
index 000000000000..8443b12d7fed
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-3-reverse-ref.xhtml
@@ -0,0 +1,79 @@
+<?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>
+    <style>
+      div { height: 20px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        margin-bottom: 2px;
+      }
+
+      <!-- customizations for flexbox border/padding -->
+      .borderA {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 6px;
+        border-right-width: 4px;
+        border-bottom-width: 2px;
+        border-left-width: 8px;
+      }
+
+      .borderB {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 4px;
+        border-right-width: 5px;
+        border-bottom-width: 6px;
+        border-left-width: 7px;
+      }
+
+      .paddingA {
+        padding: 4px 3px 2px 1px;
+      }
+
+      .paddingB {
+        padding: 8px 11px 14px 17px;
+      }
+
+      div.child1 {
+        display: inline-block;
+        width: 74px;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.child2 {
+        display: inline-block;
+        width: 110px;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox borderA"
+         ><div class="child2"/><div class="child1"/></div>
+    <div class="flexbox borderA paddingA"
+         ><div class="child2"/><div class="child1"/></div>
+    <div class="flexbox borderA paddingB"
+         ><div class="child2"/><div class="child1"/></div>
+    <div class="flexbox borderB"
+         ><div class="child2"/><div class="child1"/></div>
+    <div class="flexbox borderB paddingA"
+         ><div class="child2"/><div class="child1"/></div>
+    <div class="flexbox borderB paddingB"
+         ><div class="child2"/><div class="child1"/></div>
+    <div class="flexbox paddingA"
+         ><div class="child2"/><div class="child1"/></div>
+    <div class="flexbox paddingB"
+         ><div class="child2"/><div class="child1"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-mbp-horiz-3-reverse.xhtml b/layout/reftests/flexbox/flexbox-mbp-horiz-3-reverse.xhtml
new file mode 100644
index 000000000000..aceed72f6b50
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-3-reverse.xhtml
@@ -0,0 +1,79 @@
+<?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>
+    <style>
+      div { height: 20px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        display: -moz-flex;
+        -moz-flex-direction: row-reverse;
+        margin-bottom: 2px;
+      }
+
+      <!-- customizations for flexbox border/padding -->
+      .borderA {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 6px;
+        border-right-width: 4px;
+        border-bottom-width: 2px;
+        border-left-width: 8px;
+      }
+
+      .borderB {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 4px;
+        border-right-width: 5px;
+        border-bottom-width: 6px;
+        border-left-width: 7px;
+      }
+
+      .paddingA {
+        padding: 4px 3px 2px 1px;
+      }
+
+      .paddingB {
+        padding: 8px 11px 14px 17px;
+      }
+
+      div.child1 {
+        -moz-flex: 1 0 24px;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.child2 {
+        -moz-flex: 2 0 10px;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox borderA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderA paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderA paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-mbp-horiz-3.xhtml b/layout/reftests/flexbox/flexbox-mbp-horiz-3.xhtml
new file mode 100644
index 000000000000..82f199ad8029
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-mbp-horiz-3.xhtml
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with border/padding on a flex container and on its children -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div { height: 20px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        display: -moz-flex;
+        margin-bottom: 2px;
+      }
+
+      <!-- customizations for flex container border/padding -->
+      .borderA {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 6px;
+        border-right-width: 4px;
+        border-bottom-width: 2px;
+        border-left-width: 8px;
+      }
+
+      .borderB {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 4px;
+        border-right-width: 5px;
+        border-bottom-width: 6px;
+        border-left-width: 7px;
+      }
+
+      .paddingA {
+        padding: 4px 3px 2px 1px;
+      }
+
+      .paddingB {
+        padding: 8px 11px 14px 17px;
+      }
+
+      div.child1 {
+        -moz-flex: 1 0 24px;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.child2 {
+        -moz-flex: 2 0 10px;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox borderA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderA paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderA paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-minSize-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-minSize-horiz-1-ref.xhtml
new file mode 100644
index 000000000000..9c13e263088f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-minSize-horiz-1-ref.xhtml
@@ -0,0 +1,78 @@
+<?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>
+    <style>
+      div.flexbox {
+        width: 200px;
+        font-size: 8px;
+      }
+      div.outerContainer {
+        border: 1px dotted black;
+        height: 42px;
+        margin-bottom: 5px;
+      }
+      div.flexbox > * {
+        vertical-align: top;
+        display: inline-block;
+        margin-right: 20px;
+        border: 1px dashed green;
+        background: lightblue;
+        height: 40px;
+      }
+      div.childMinSizeIsMinContent > * {
+        min-width: -moz-min-content;
+      }
+      div.childSizeIsMinContent > * {
+        width: -moz-min-content;
+      }
+      div.smallSize      { width: 5px; }
+      div.smallFlexBasis { width: 2px; }
+      div.zeroWidth      { width: 0; }
+
+    </style>
+  </head>
+  <body>
+
+    <!-- Check that we use the min-content width as a lower-bound when sizing
+         flex items. -->
+    <div class="flexbox childMinSizeIsMinContent outerContainer">
+      <div>abc d e f</div
+      ><div class="smallSize">abc d e f</div
+      ><div class="smallFlexBasis">abc d e f</div>
+    </div>
+
+    <!-- ... EVEN if our flex container is small and we're overflowing. -->
+    <div class="outerContainer smallSize">
+      <div class="flexbox childSizeIsMinContent">
+        <div>abc d e f</div
+        ><div>abc d e f</div
+        ><div>abc d e f</div>
+      </div>
+    </div>
+
+    <!-- Test that "min-width: 0" on flex items will keep us from clamping to
+         the min-content width. (So we can now actually honor small 'width'
+         and 'flex-basis' values.) -->
+    <div class="flexbox outerContainer">
+      <div>abc d e f</div
+      ><div class="smallSize">abc d e f</div
+      ><div class="smallFlexBasis">abc d e f</div>
+    </div>
+
+    <!-- ... and similarly, when we have a small flex container and we trigger
+         shrinking behavior, flex items with "min-width: 0" are allowed to
+         shrink past their min-content width. -->
+    <div class="outerContainer smallSize">
+      <div class="flexbox">
+        <div class="zeroWidth">abc d e f</div
+        ><div class="zeroWidth">abc d e f</div
+        ><div class="zeroWidth">abc d e f</div>
+      </div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-minSize-horiz-1.xhtml b/layout/reftests/flexbox/flexbox-minSize-horiz-1.xhtml
new file mode 100644
index 000000000000..9768486ca2cb
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-minSize-horiz-1.xhtml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that we honor the flexbox-specific behavior of the
+     new "min-width: auto" value that was introduced in the flexbox spec.
+
+     We check that flex items can't shrink below their min-content width,
+     unless we explicitly reduce their min-width with e.g. "min-width: 0".
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        width: 200px;
+        display: -moz-flex;
+        margin-bottom: 5px;
+        font-size: 8px;
+        border: 1px dotted black;
+      }
+      div.flexbox > * {
+        margin-right: 20px;
+        border: 1px dashed green;
+        background: lightblue;
+        height: 40px;
+      }
+      div.smallSize      { width: 5px; }
+      div.smallFlexBasis { -moz-flex-basis: 2px; }
+      div.zeroMinWidth   { min-width: 0; }
+
+    </style>
+  </head>
+  <body>
+
+    <!-- Check that we use the min-content width as a lower-bound when sizing
+         flex items. -->
+    <div class="flexbox">
+      <div>abc d e f</div>
+      <div class="smallSize">abc d e f</div>
+      <div class="smallFlexBasis">abc d e f</div>
+    </div>
+
+    <!-- ... EVEN if our flex container is small and we're overflowing. -->
+    <div class="flexbox smallSize">
+      <div>abc d e f</div>
+      <div class="smallSize">abc d e f</div>
+      <div class="smallFlexBasis">abc d e f</div>
+    </div>
+
+    <!-- Test that "min-width: 0" on flex items will keep us from clamping to
+         the min-content width. (So we can now actually honor small 'width'
+         and 'flex-basis' values.) -->
+    <div class="flexbox">
+      <div class="zeroMinWidth">abc d e f</div>
+      <div class="zeroMinWidth smallSize">abc d e f</div>
+      <div class="zeroMinWidth smallFlexBasis">abc d e f</div>
+    </div>
+
+    <!-- ... and similarly, when we have a small flex container and we trigger
+         shrinking behavior, flex items with "min-width: 0" are allowed to
+         shrink past their min-content width. -->
+    <div class="flexbox smallSize">
+      <div class="zeroMinWidth">abc d e f</div>
+      <div class="zeroMinWidth smallSize">abc d e f</div>
+      <div class="zeroMinWidth smallFlexBasis">abc d e f</div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-minSize-vert-1-ref.xhtml b/layout/reftests/flexbox/flexbox-minSize-vert-1-ref.xhtml
new file mode 100644
index 000000000000..f736fb8abb85
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-minSize-vert-1-ref.xhtml
@@ -0,0 +1,55 @@
+<?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>
+    <style>
+      div.flexbox {
+        height: 140px;
+        margin-right: 5px;
+        font-size: 8px;
+        border: 1px dotted black;
+        float: left;
+      }
+      div.flexbox > * {
+        margin-bottom: 20px;
+        border: 1px dashed green;
+        background: lightblue;
+        width: 40px;
+      }
+      div.smallSize      { height: 5px; }
+      div.smallFlexBasis { height: 2px; }
+      div.zeroHeight     { height: 0; }
+
+    </style>
+  </head>
+  <body>
+
+    <div class="flexbox">
+      <div>a b</div>
+      <div>a b</div>
+      <div>a b</div>
+    </div>
+
+    <div class="flexbox smallSize">
+      <div>a b</div>
+      <div>a b</div>
+      <div>a b</div>
+    </div>
+
+    <div class="flexbox">
+      <div>a b</div>
+      <div class="smallSize">a b</div>
+      <div class="smallFlexBasis">a b</div>
+    </div>
+
+    <div class="flexbox smallSize">
+      <div class="zeroHeight">a b</div>
+      <div class="zeroHeight">a b</div>
+      <div class="zeroHeight">a b</div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-minSize-vert-1.xhtml b/layout/reftests/flexbox/flexbox-minSize-vert-1.xhtml
new file mode 100644
index 000000000000..937c80e149bd
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-minSize-vert-1.xhtml
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that we honor the flexbox-specific behavior of the
+     new "min-height: auto" value that was introduced in the flexbox spec.
+
+     We check that flex items can't shrink below their min-content height,
+     unless we explicitly reduce their min-height with e.g. "min-height: 0".
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        height: 140px;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+        margin-right: 5px;
+        font-size: 8px;
+        border: 1px dotted black;
+        float: left;
+      }
+      div.flexbox > * {
+        margin-bottom: 20px;
+        border: 1px dashed green;
+        background: lightblue;
+        width: 40px;
+      }
+      div.smallSize      { height: 5px; }
+      div.smallFlexBasis { -moz-flex-basis: 2px; }
+      div.zeroMinHeight  { min-height: 0; }
+
+    </style>
+  </head>
+  <body>
+
+    <!-- Check that we use the min-content height as a lower-bound when sizing
+         flex items. -->
+    <div class="flexbox">
+      <div>a b</div>
+      <div class="smallSize">a b</div>
+      <div class="smallFlexBasis">a b</div>
+    </div>
+
+    <!-- ... EVEN if our flex container is small and we're overflowing. -->
+    <div class="flexbox smallSize">
+      <div>a b</div>
+      <div class="smallSize">a b</div>
+      <div class="smallFlexBasis">a b</div>
+    </div>
+
+    <!-- Test that "min-height: 0" on flex items will keep us from clamping to
+         the min-content height. (So we can now actually honor small 'height'
+         and 'flex-basis' values.) -->
+    <div class="flexbox">
+      <div class="zeroMinHeight">a b</div>
+      <div class="zeroMinHeight smallSize">a b</div>
+      <div class="zeroMinHeight smallFlexBasis">a b</div>
+    </div>
+
+    <!-- ... and similarly, when we have a small flex container and we trigger
+         shrinking behavior, flex items with "min-height: 0" are allowed to
+         shrink past their min-content height. -->
+    <div class="flexbox smallSize">
+      <div class="zeroMinHeight">a b</div>
+      <div class="zeroMinHeight smallSize">a b</div>
+      <div class="zeroMinHeight smallFlexBasis">a b</div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-1-ref.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-1-ref.xhtml
new file mode 100644
index 000000000000..20925cd5651a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-1-ref.xhtml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for absolutely positioned children of a flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.containingBlock {
+        top: 15px;
+        left: 20px;
+        height: 400px;
+        position: absolute;
+        border: 2px dashed purple;
+      }
+      .abspos {
+        position: absolute;
+        left: 5px;
+        border: 2px dotted black;
+      }
+      div.flexbox {
+        width: 200px;
+        height: 100px;
+      }
+      div.a {
+        width: 100%;
+        height: 100px;
+        background: lightgreen;
+        display: inline-block;
+      }
+      div.b {
+        width: 100%;
+        height: 100px;
+        background: yellow;
+        display: inline-block;
+      }
+      div.inflex {
+        width: 20px;
+        height: 100px;
+        background: gray;
+        display: inline-block;
+      }
+      div.noFlexFn {
+        width: 15px;
+        height: 15px;
+        background: teal;
+        display: inline-block;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="containingBlock">
+      <!-- First child abspos: -->
+      <div class="flexbox"
+           ><div class="a abspos" style="width: 30px"/><div class="b"/></div>
+      <!-- Second child abspos: -->
+      <div class="flexbox"
+           ><div class="a"/><div class="b abspos" style="width: 20px"/></div>
+      <!-- Middle child abspos: -->
+      <div class="flexbox"
+           ><div class="a" style="width: 80px"
+          /><div class="inflex abspos"
+          /><div class="b" style="width: 120px"/></div>
+      <!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
+      <div class="flexbox"
+           ><div class="inflex" style="margin-left: 12px"
+          /><div class="inflex" style="margin-left: 24px"
+          /><div class="inflex" style="margin-left: 24px"
+          /><div class="noFlexFn abspos"
+          /><div class="inflex" style="margin-left: 48px"/></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-1.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-1.xhtml
new file mode 100644
index 000000000000..e4d8accf3a7a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-1.xhtml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     Testcase with absolutely positioned children of a flex container.
+     This positioning is with respect to the containing block's left edge.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.containingBlock {
+        top: 15px;
+        left: 20px;
+        height: 400px;
+        position: absolute;
+        border: 2px dashed purple;
+      }
+      .abspos {
+        position: absolute;
+        left: 5px;
+        border: 2px dotted black;
+      }
+      div.flexbox {
+        width: 200px;
+        height: 100px;
+        display: -moz-flex;
+      }
+      div.a {
+        -moz-flex: 1 0 auto;
+        width: 30px;
+        height: 100px;
+        background: lightgreen;
+      }
+      div.b {
+        -moz-flex: 2 0 auto;
+        width: 20px;
+        height: 100px;
+        background: yellow;
+      }
+      div.inflex {
+        -moz-flex: none;
+        width: 20px;
+        height: 100px;
+        background: gray;
+      }
+      div.noFlexFn {
+        width: 15px;
+        height: 15px;
+        background: teal;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="containingBlock">
+      <!-- First child abspos: -->
+      <div class="flexbox"><div class="a abspos"/><div class="b"/></div>
+      <!-- Second child abspos: -->
+      <div class="flexbox"><div class="a"/><div class="b abspos"/></div>
+      <!-- Middle child abspos: -->
+      <div class="flexbox"
+           ><div class="a"/><div class="inflex abspos"/><div class="b"/></div>
+      <!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
+      <div class="flexbox" style="-moz-justify-content: space-around"
+           ><div class="inflex"/><div class="inflex"/><div class="inflex"
+          /><div class="noFlexFn abspos"/><div class="inflex"/></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-2-ref.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-2-ref.xhtml
new file mode 100644
index 000000000000..4e403c21977f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-2-ref.xhtml
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for absolutely positioned children of a flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.containingBlock {
+        top: 15px;
+        left: 20px;
+        height: 400px;
+        position: absolute;
+        border: 2px dashed purple;
+      }
+      .abspos {
+        position: absolute;
+        border: 2px dotted black;
+      }
+      div.flexbox {
+        width: 200px;
+        height: 100px;
+      }
+      div.a {
+        width: 100%;
+        height: 100px;
+        background: lightgreen;
+        display: inline-block;
+      }
+      div.b {
+        width: 100%;
+        height: 100px;
+        background: yellow;
+        display: inline-block;
+      }
+      div.inflex {
+        width: 20px;
+        height: 100px;
+        background: gray;
+        display: inline-block;
+      }
+      div.noFlexFn {
+        width: 15px;
+        height: 15px;
+        background: teal;
+        display: inline-block;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="containingBlock">
+      <!-- First child abspos: -->
+      <div class="flexbox"
+           ><div class="a abspos" style="width: 30px"/><div class="b"/></div>
+      <!-- Second child abspos: -->
+      <div class="flexbox"
+           ><div class="a"/><div class="b abspos" style="width: 20px"/></div>
+      <!-- Middle child abspos: -->
+      <div class="flexbox"
+           ><div class="a" style="width: 80px"
+          /><div class="inflex abspos"
+          /><div class="b" style="width: 120px"/></div>
+      <!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
+      <div class="flexbox"
+           ><div class="inflex" style="margin-left: 12px"
+          /><div class="inflex" style="margin-left: 24px"
+          /><div class="inflex" style="margin-left: 24px"
+          /><div class="noFlexFn abspos" style="margin-left: 24px"
+          /><div class="inflex" style="margin-left: 48px"/></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-2.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-2.xhtml
new file mode 100644
index 000000000000..e60356475177
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-2.xhtml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     Testcase with absolutely positioned children of a flex container.
+     In this testcase, we simply specify "position: absolute" without
+     actually doing any positioning, to test the "static position" of these
+     children.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.containingBlock {
+        top: 15px;
+        left: 20px;
+        height: 400px;
+        position: absolute;
+        border: 2px dashed purple;
+      }
+      .abspos {
+        position: absolute;
+        border: 2px dotted black;
+      }
+      div.flexbox {
+        width: 200px;
+        height: 100px;
+        display: -moz-flex;
+      }
+      div.a {
+        -moz-flex: 1 0 auto;
+        width: 30px;
+        height: 100px;
+        background: lightgreen;
+      }
+      div.b {
+        -moz-flex: 2 0 auto;
+        width: 20px;
+        height: 100px;
+        background: yellow;
+      }
+      div.inflex {
+        -moz-flex: none;
+        width: 20px;
+        height: 100px;
+        background: gray;
+      }
+      div.noFlexFn {
+        width: 15px;
+        height: 15px;
+        background: teal;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="containingBlock">
+      <!-- First child abspos: -->
+      <div class="flexbox"><div class="a abspos"/><div class="b"/></div>
+      <!-- Second child abspos: -->
+      <div class="flexbox"><div class="a"/><div class="b abspos"/></div>
+      <!-- Middle child abspos: -->
+      <div class="flexbox"
+           ><div class="a"/><div class="inflex abspos"/><div class="b"/></div>
+      <!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
+      <div class="flexbox" style="-moz-justify-content: space-around"
+           ><div class="inflex"/><div class="inflex"/><div class="inflex"
+          /><div class="noFlexFn abspos"/><div class="inflex"/></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-3-ref.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-3-ref.xhtml
new file mode 100644
index 000000000000..9bafa1506a43
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-3-ref.xhtml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for absolutely positioned flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.containingBlock {
+        top: 15px;
+        left: 20px;
+        height: 400px;
+        position: absolute;
+        border: 2px dashed purple;
+      }
+      div.flexbox {
+        top: 30px;
+        left: 40px;
+        width: 200px;
+        height: 100px;
+        position: absolute;
+        border: 1px solid black;
+      }
+      div.a {
+        width: 80px;
+        height: 100px;
+        background: lightgreen;
+        display: inline-block;
+      }
+      div.b {
+        width: 120px;
+        height: 100px;
+        background: yellow;
+        display: inline-block;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="containingBlock">
+      <div class="flexbox"><div class="a"/><div class="b"/></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-3.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-3.xhtml
new file mode 100644
index 000000000000..d2603b541824
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-3.xhtml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     Testcase with absolutely positioned flex container.
+     This positioning is with respect to the containing block's left edge.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.containingBlock {
+        top: 15px;
+        left: 20px;
+        height: 400px;
+        position: absolute;
+        border: 2px dashed purple;
+      }
+      div.flexbox {
+        top: 30px;
+        left: 40px;
+        width: 200px;
+        height: 100px;
+        display: -moz-flex;
+        position: absolute;
+        border: 1px solid black;
+      }
+      div.a {
+        -moz-flex: 1 0 30px;
+        height: 100px;
+        background: lightgreen;
+      }
+      div.b {
+        -moz-flex: 2 0 20px;
+        height: 100px;
+        background: yellow;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="containingBlock">
+      <div class="flexbox"><div class="a"/><div class="b"/></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-4-ref.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-4-ref.xhtml
new file mode 100644
index 000000000000..4c675fa8eecb
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-4-ref.xhtml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for absolutely positioned flex container & children. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.containingBlock {
+        top: 15px;
+        left: 20px;
+        height: 400px;
+        position: absolute;
+        border: 2px dashed purple;
+      }
+      .abspos {
+        position: absolute;
+        left: 5px;
+        border: 2px dotted black;
+      }
+      div.flexbox {
+        top: 30px;
+        left: 40px;
+        width: 200px;
+        height: 100px;
+        position: absolute;
+        border: 1px solid black;
+      }
+      div.a {
+        width: 30px;
+        height: 100px;
+        background: lightgreen;
+        display: inline-block;
+      }
+      div.b {
+        width: 100%;
+        height: 100px;
+        background: yellow;
+        display: inline-block;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="containingBlock">
+      <div class="flexbox"
+           ><div class="a abspos"/><div class="b"/></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-4.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-4.xhtml
new file mode 100644
index 000000000000..f3445597ab15
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-4.xhtml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     Testcase with absolutely positioned flex container & children.
+     The children's positioning is with respect to the flex container.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.containingBlock {
+        top: 15px;
+        left: 20px;
+        height: 400px;
+        position: absolute;
+        border: 2px dashed purple;
+      }
+      .abspos {
+        position: absolute;
+        left: 5px;
+        border: 2px dotted black;
+      }
+      div.flexbox {
+        top: 30px;
+        left: 40px;
+        width: 200px;
+        height: 100px;
+        display: -moz-flex;
+        position: absolute;
+        border: 1px solid black;
+      }
+      div.a {
+        -moz-flex: 1 0 auto;
+        width:  30px;
+        height: 100px;
+        background: lightgreen;
+      }
+      div.b {
+        -moz-flex: 2 0 20px;
+        height: 100px;
+        background: yellow;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="containingBlock">
+      <div class="flexbox"><div class="a abspos"/><div class="b"/></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-1-ref.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-1-ref.xhtml
new file mode 100644
index 000000000000..27e8438b321e
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-1-ref.xhtml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for fixed-position children of a flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.containingBlock {
+        top: 15px;
+        left: 20px;
+        height: 400px;
+        position: absolute;
+        border: 2px dashed purple;
+      }
+      .fixedpos {
+        position: fixed;
+        left: 5px;
+        border: 2px dotted black;
+      }
+      div.flexbox {
+        width: 200px;
+        height: 100px;
+      }
+      div.a {
+        width: 100%;
+        height: 100px;
+        background: lightgreen;
+        display: inline-block;
+      }
+      div.b {
+        width: 100%;
+        height: 100px;
+        background: yellow;
+        display: inline-block;
+      }
+      div.inflex {
+        width: 20px;
+        height: 100px;
+        background: gray;
+        display: inline-block;
+      }
+      div.noFlexFn {
+        width: 15px;
+        height: 15px;
+        background: teal;
+        display: inline-block;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="containingBlock">
+      <!-- First child fixedpos: -->
+      <div class="flexbox"
+           ><div class="a fixedpos" style="width: 30px"/><div class="b"/></div>
+      <!-- Second child fixedpos: -->
+      <div class="flexbox"
+           ><div class="a"/><div class="b fixedpos" style="width: 20px"/></div>
+      <!-- Middle child fixedpos: -->
+      <div class="flexbox"
+           ><div class="a" style="width: 80px"
+          /><div class="inflex fixedpos"
+          /><div class="b" style="width: 120px"/></div>
+      <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: -->
+      <div class="flexbox"
+           ><div class="inflex" style="margin-left: 12px"
+          /><div class="inflex" style="margin-left: 24px"
+          /><div class="inflex" style="margin-left: 24px"
+          /><div class="noFlexFn fixedpos"
+          /><div class="inflex" style="margin-left: 48px"/></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-1.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-1.xhtml
new file mode 100644
index 000000000000..c7514e209e72
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-1.xhtml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     Testcase with fixed-position children of a flex container.
+     The positioning is with respect to the containing block's left edge.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.containingBlock {
+        top: 15px;
+        left: 20px;
+        height: 400px;
+        position: absolute;
+        border: 2px dashed purple;
+      }
+      .fixedpos {
+        position: fixed;
+        left: 5px;
+        border: 2px dotted black;
+      }
+      div.flexbox {
+        width: 200px;
+        height: 100px;
+        display: -moz-flex;
+      }
+      div.a {
+        -moz-flex: 1 0 auto;
+        width: 30px;
+        height: 100px;
+        background: lightgreen;
+      }
+      div.b {
+        -moz-flex: 2 0 auto;
+        width: 20px;
+        height: 100px;
+        background: yellow;
+      }
+      div.inflex {
+        -moz-flex: none;
+        width: 20px;
+        height: 100px;
+        background: gray;
+      }
+      div.noFlexFn {
+        width: 15px;
+        height: 15px;
+        background: teal;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="containingBlock">
+      <!-- First child fixedpos: -->
+      <div class="flexbox"><div class="a fixedpos"/><div class="b"/></div>
+      <!-- Second child fixedpos: -->
+      <div class="flexbox"><div class="a"/><div class="b fixedpos"/></div>
+      <!-- Middle child fixedpos: -->
+      <div class="flexbox"
+           ><div class="a"/><div class="inflex fixedpos"/><div class="b"/></div>
+      <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: -->
+      <div class="flexbox" style="-moz-justify-content: space-around"
+           ><div class="inflex"/><div class="inflex"/><div class="inflex"
+          /><div class="noFlexFn fixedpos"/><div class="inflex"/></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-2-ref.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-2-ref.xhtml
new file mode 100644
index 000000000000..5dbeeeeb52ea
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-2-ref.xhtml
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for fixed-position children of a flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.containingBlock {
+        top: 15px;
+        left: 20px;
+        height: 400px;
+        position: absolute;
+        border: 2px dashed purple;
+      }
+      .fixedpos {
+        position: fixed;
+        border: 2px dotted black;
+      }
+      div.flexbox {
+        width: 200px;
+        height: 100px;
+      }
+      div.a {
+        width: 100%;
+        height: 100px;
+        background: lightgreen;
+        display: inline-block;
+      }
+      div.b {
+        width: 100%;
+        height: 100px;
+        background: yellow;
+        display: inline-block;
+      }
+      div.inflex {
+        width: 20px;
+        height: 100px;
+        background: gray;
+        display: inline-block;
+      }
+      div.noFlexFn {
+        width: 15px;
+        height: 15px;
+        background: teal;
+        display: inline-block;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="containingBlock">
+      <!-- First child fixedpos: -->
+      <div class="flexbox"
+           ><div class="a fixedpos" style="width: 30px"/><div class="b"/></div>
+      <!-- Second child fixedpos: -->
+      <div class="flexbox"
+           ><div class="a"/><div class="b fixedpos" style="width: 20px"/></div>
+      <!-- Middle child fixedpos: -->
+      <div class="flexbox"
+           ><div class="a" style="width: 80px"
+          /><div class="inflex fixedpos"
+          /><div class="b" style="width: 120px"/></div>
+      <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: -->
+      <div class="flexbox"
+           ><div class="inflex" style="margin-left: 12px"
+          /><div class="inflex" style="margin-left: 24px"
+          /><div class="inflex" style="margin-left: 24px"
+          /><div class="noFlexFn fixedpos" style="margin-left: 24px"
+          /><div class="inflex" style="margin-left: 48px"/></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-2.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-2.xhtml
new file mode 100644
index 000000000000..e6bae3ad5895
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-2.xhtml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     Testcase with fixed-position children of a flex container.
+     In this testcase, we simply specify "position: fixed" without
+     actually doing any positioning, to test the "static position" of these
+     children.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.containingBlock {
+        top: 15px;
+        left: 20px;
+        height: 400px;
+        position: absolute;
+        border: 2px dashed purple;
+      }
+      .fixedpos {
+        position: fixed;
+        border: 2px dotted black;
+      }
+      div.flexbox {
+        width: 200px;
+        height: 100px;
+        display: -moz-flex;
+      }
+      div.a {
+        -moz-flex: 1 0 auto;
+        width: 30px;
+        height: 100px;
+        background: lightgreen;
+      }
+      div.b {
+        -moz-flex: 2 0 auto;
+        width: 20px;
+        height: 100px;
+        background: yellow;
+      }
+      div.inflex {
+        -moz-flex: none;
+        width: 20px;
+        height: 100px;
+        background: gray;
+      }
+      div.noFlexFn {
+        width: 15px;
+        height: 15px;
+        background: teal;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="containingBlock">
+      <!-- First child fixedpos: -->
+      <div class="flexbox"><div class="a fixedpos"/><div class="b"/></div>
+      <!-- Second child fixedpos: -->
+      <div class="flexbox"><div class="a"/><div class="b fixedpos"/></div>
+      <!-- Middle child fixedpos: -->
+      <div class="flexbox"
+           ><div class="a"/><div class="inflex fixedpos"/><div class="b"/></div>
+      <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: -->
+      <div class="flexbox" style="-moz-justify-content: space-around"
+           ><div class="inflex"/><div class="inflex"/><div class="inflex"
+          /><div class="noFlexFn fixedpos"/><div class="inflex"/></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-3-ref.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-3-ref.xhtml
new file mode 100644
index 000000000000..d0a086d60ddb
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-3-ref.xhtml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for fixed-position flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.containingBlock {
+        top: 15px;
+        left: 20px;
+        height: 400px;
+        position: absolute;
+        border: 2px dashed purple;
+      }
+      div.flexbox {
+        top: 30px;
+        left: 40px;
+        width: 200px;
+        height: 100px;
+        position: fixed;
+        border: 1px solid black;
+      }
+      div.a {
+        width: 80px;
+        height: 100px;
+        background: lightgreen;
+        display: inline-block;
+      }
+      div.b {
+        width: 120px;
+        height: 100px;
+        background: yellow;
+        display: inline-block;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="containingBlock">
+      <div class="flexbox"><div class="a"/><div class="b"/></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-3.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-3.xhtml
new file mode 100644
index 000000000000..c4c6847d05e7
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-3.xhtml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     Testcase with fixed-position flex container.
+     This positioning is with respect to the viewport.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.containingBlock {
+        top: 15px;
+        left: 20px;
+        height: 400px;
+        position: absolute;
+        border: 2px dashed purple;
+      }
+      div.flexbox {
+        top: 30px;
+        left: 40px;
+        width: 200px;
+        height: 100px;
+        display: -moz-flex;
+        position: fixed;
+        border: 1px solid black;
+      }
+      div.a {
+        -moz-flex: 1 0 30px;
+        height: 100px;
+        background: lightgreen;
+      }
+      div.b {
+        -moz-flex: 2 0 20px;
+        height: 100px;
+        background: yellow;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="containingBlock">
+      <div class="flexbox"><div class="a"/><div class="b"/></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-4-ref.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-4-ref.xhtml
new file mode 100644
index 000000000000..877832665593
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-4-ref.xhtml
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for fixed-position flex container & children. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.containingBlock {
+        top: 15px;
+        left: 20px;
+        height: 400px;
+        position: absolute;
+        border: 2px dashed purple;
+      }
+      .fixedpos {
+        position: fixed;
+        left: 5px;
+        border: 2px dotted black;
+      }
+      div.flexbox {
+        top: 30px;
+        left: 40px;
+        width: 200px;
+        height: 100px;
+        position: fixed;
+        border: 2px dashed teal;
+      }
+      div.a {
+        width: 30px;
+        height: 100px;
+        background: lightgreen;
+        display: inline-block;
+      }
+      div.b {
+        width: 100%;
+        height: 100px;
+        background: yellow;
+        display: inline-block;
+        vertical-align: top;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="containingBlock">
+      <div class="flexbox"
+           ><div class="a fixedpos"/><div class="b"/></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-4.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-4.xhtml
new file mode 100644
index 000000000000..8a1e8d7c3137
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-4.xhtml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     Testcase with fixed-position flex container & children.
+     All positioning is with respect to the viewport.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.containingBlock {
+        top: 15px;
+        left: 20px;
+        height: 400px;
+        position: absolute;
+        border: 2px dashed purple;
+      }
+      .fixedpos {
+        position: fixed;
+        left: 5px;
+        border: 2px dotted black;
+      }
+      div.flexbox {
+        top: 30px;
+        left: 40px;
+        width: 200px;
+        height: 100px;
+        display: -moz-flex;
+        position: fixed;
+        border: 2px dashed teal;
+      }
+      div.a {
+        -moz-flex: 1 0 auto;
+        width:  30px;
+        height: 100px;
+        background: lightgreen;
+      }
+      div.b {
+        -moz-flex: 2 0 20px;
+        height: 100px;
+        background: yellow;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="containingBlock">
+      <div class="flexbox"><div class="a fixedpos"/><div class="b"/></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-resizeviewport-1-helper.html b/layout/reftests/flexbox/flexbox-resizeviewport-1-helper.html
new file mode 100644
index 000000000000..7f038ed40f00
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-resizeviewport-1-helper.html
@@ -0,0 +1,31 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Helper-file for reftest flexbox-resizeviewport-1.xhtml
+     I'm intentionally using quirks-mode (no doctype), so that
+     a 100% height will work. -->
+<html>
+  <head>
+    <style>
+      div.flexbox {
+        display: -moz-flex;
+        height: 100%;
+        border: 2px dashed black;
+      }
+      div.a {
+        -moz-flex: 1;
+        background: pink;
+      }
+      div.b {
+        -moz-flex: 1;
+        background: teal;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="a"></div><div class="b"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-resizeviewport-1-ref.xhtml b/layout/reftests/flexbox/flexbox-resizeviewport-1-ref.xhtml
new file mode 100644
index 000000000000..791d3a89f3d8
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-resizeviewport-1-ref.xhtml
@@ -0,0 +1,22 @@
+<?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>
+    <style>
+      iframe {
+        width:  75px;
+        height: 75px;
+      }
+    </style>
+  </head>
+  <body onload="tweak()">
+    <iframe src="flexbox-resizeviewport-1-helper.html" style="width: 50px"/>
+    <iframe src="flexbox-resizeviewport-1-helper.html" style="width: 125px"/>
+    <br/>
+    <iframe src="flexbox-resizeviewport-1-helper.html" style="height: 50px"/>
+    <iframe src="flexbox-resizeviewport-1-helper.html" style="height: 125px"/>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-resizeviewport-1.xhtml b/layout/reftests/flexbox/flexbox-resizeviewport-1.xhtml
new file mode 100644
index 000000000000..2875e8ee3b1f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-resizeviewport-1.xhtml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase to be sure a flex container gets reflowed properly when its
+     iframe changes size. -->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <style>
+      iframe {
+        width:  75px;
+        height: 75px;
+      }
+    </style>
+    <script>
+      function setElementPropertyTo(id, propertyName, propertyValue) {
+        var elem = document.getElementById(id);
+        elem.style[propertyName] = propertyValue;
+      }
+
+      function tweak() {
+        setElementPropertyTo("a", "width", "50px");
+        setElementPropertyTo("b", "width", "125px");
+        setElementPropertyTo("c", "height", "50px");
+        setElementPropertyTo("d", "height", "125px");
+        document.documentElement.removeAttribute("class");
+      }
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+  </head>
+  <body>
+    <iframe id="a" src="flexbox-resizeviewport-1-helper.html"/>
+    <iframe id="b" src="flexbox-resizeviewport-1-helper.html"/>
+    <br/>
+    <iframe id="c" src="flexbox-resizeviewport-1-helper.html"/>
+    <iframe id="d" src="flexbox-resizeviewport-1-helper.html"/>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-sizing-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-sizing-horiz-1-ref.xhtml
new file mode 100644
index 000000000000..d82e0a042593
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-sizing-horiz-1-ref.xhtml
@@ -0,0 +1,73 @@
+<?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>
+    <style>
+      div { height: 10px; }
+      div.flexbox {
+        border: 1px dashed blue;
+        font-size: 10px;
+        -moz-flex-direction: column;
+        margin-bottom: 2px;
+      }
+      div.a, div.b, div.c { float: left }
+      div.a {
+        width: 20px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 40px;
+        background: purple;
+      }
+      div.c {
+        width: 40px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="a" style="width: 60px"/>
+      <div class="b" style="width: 60px"/>
+      <div class="c" style="width: 60px"/>
+    </div>
+
+    <div class="flexbox">
+      <div class="a" style="width: 60px"/>
+      <div class="b" style="width: 60px"/>
+      <div class="c" style="width: 60px"/>
+    </div>
+
+    <div class="flexbox" style="width: 300px">
+      <div class="a" style="width: 60px"/>
+      <div class="b" style="width: 60px"/>
+      <div class="c" style="width: 60px"/>
+    </div>
+
+    <div class="flexbox" style="width: 70px">
+      <div class="a" style="width: 10px"/>
+      <div class="b"/>
+      <div class="c" style="width: 20px"/>
+    </div>
+
+    <div class="flexbox" style="width: 20px">
+      <div class="b"/>
+    </div>
+
+    <div class="flexbox" style="width: 58px">
+      <div class="a" style="width: 6px"/>
+      <div class="b"/>
+      <div class="c" style="width: 12px"/>
+    </div>
+
+    <div class="flexbox" style="width: 140px">
+      <div class="a" style="width: 40px"/>
+      <div class="b" style="width: 40px"/>
+      <div class="c" style="width: 60px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-sizing-horiz-1.xhtml b/layout/reftests/flexbox/flexbox-sizing-horiz-1.xhtml
new file mode 100644
index 000000000000..574951675b75
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-sizing-horiz-1.xhtml
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This testcase checks how "min-width" and "max-width" affect the sizing
+     of horizontal flex containers that have no explicit "width" property.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div { height: 10px; }
+      div.flexbox {
+        border: 1px dashed blue;
+        font-size: 10px;
+        display: -moz-flex;
+        margin-bottom: 2px;
+      }
+      div.a {
+        -moz-flex: 1 20px;
+        max-width: 60px;
+        background: lightgreen;
+      }
+      div.b {
+        -moz-flex: 1 20px;
+        min-width: 40px;
+        max-width: 60px;
+        background: purple;
+      }
+      div.c {
+        -moz-flex: 1 40px;
+        max-width: 10px;
+        max-width: 60px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- auto-sized horizontal flexbox should occupy the available width. -->
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- Adding a small min-size shouldn't affect that. -->
+    <div class="flexbox" style="min-width: 10px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- ...but a (large) max-size will limit us to that size, instead of
+         our available size.-->
+    <div class="flexbox" style="max-width: 300px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- If we set a maximum size that's even smaller, it'll limit our
+         size and compress our children. -->
+    <div class="flexbox" style="max-width: 70px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- The max-size may be small enough that our items will overflow. -->
+    <div class="flexbox" style="max-width: 20px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- But if we add a min-size, it beats the max-size. Here, we use a
+         min-size smaller than the sum of the items' base sizes... -->
+    <div class="flexbox" style="min-width: 58px; max-width: 20px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- ...and here we use a min-size larger than the sum of the items'
+         base sizes. -->
+    <div class="flexbox" style="min-width: 140px; max-width: 20px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-sizing-vert-1-ref.xhtml b/layout/reftests/flexbox/flexbox-sizing-vert-1-ref.xhtml
new file mode 100644
index 000000000000..08738efbbca9
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-sizing-vert-1-ref.xhtml
@@ -0,0 +1,79 @@
+<?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>
+    <style>
+      div { width: 10px; }
+      div.flexbox {
+        float: left;
+        border: 1px dashed blue;
+        font-size: 10px;
+        -moz-flex-direction: column;
+        margin-right: 2px;
+      }
+      div.a {
+        height: 20px;
+        background: lightgreen;
+      }
+      div.b {
+        height: 40px;
+        background: purple;
+      }
+      div.c {
+        height: 40px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <div class="flexbox">
+      <div class="a" style="height: 30px"/>
+      <div class="b"/>
+      <div class="c" style="height: 50px"/>
+    </div>
+
+    <div class="flexbox" style="height: 200px">
+      <div class="a" style="height: 60px"/>
+      <div class="b" style="height: 60px"/>
+      <div class="c" style="height: 60px"/>
+    </div>
+
+    <div class="flexbox">
+      <div class="a" style="height: 10px"/>
+      <div class="b"/>
+      <div class="c" style="height: 20px"/>
+    </div>
+
+    <div class="flexbox" style="height: 20px">
+      <div class="b"/>
+    </div>
+
+    <div class="flexbox">
+      <div class="a" style="height: 6px"/>
+      <div class="b"/>
+      <div class="c" style="height: 12px"/>
+    </div>
+
+    <div class="flexbox">
+      <div class="a" style="height: 40px"/>
+      <div class="b" style="height: 40px"/>
+      <div class="c" style="height: 60px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-sizing-vert-1.xhtml b/layout/reftests/flexbox/flexbox-sizing-vert-1.xhtml
new file mode 100644
index 000000000000..3d4e91cb9f02
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-sizing-vert-1.xhtml
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This testcase checks how "min-height" and "max-height" affect the sizing
+     of vertical flex containers that have no explicit "height" property.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div { width: 10px; }
+      div.flexbox {
+        float: left;
+        border: 1px dashed blue;
+        font-size: 10px;
+        display: -moz-flex;
+        -moz-flex-direction: column;
+        margin-right: 2px;
+      }
+      div.a {
+        -moz-flex: 1 20px;
+        max-height: 60px;
+        background: lightgreen;
+      }
+      div.b {
+        -moz-flex: 1 20px;
+        min-height: 40px;
+        max-height: 60px;
+        background: purple;
+      }
+      div.c {
+        -moz-flex: 1 40px;
+        max-height: 10px;
+        max-height: 60px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- auto-sized flexbox should shrinkwrap its flex items' hypothetical
+         main sizes (their flex base sizes, clamped to min/max range) -->
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- Adding a small min-size shouldn't affect that. -->
+    <div class="flexbox" style="min-height: 10px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- ...nor should a large max-size. -->
+    <div class="flexbox" style="max-height: 300px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- OK. Now, if we set a minimum size that's larger than the shrinkwrap
+         size, we should jump up to that size.-->
+    <div class="flexbox" style="min-height: 120px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- ...even if it's large enough that our items won't occupy all the
+         space. -->
+    <div class="flexbox" style="min-height: 200px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- If we set a maximum size that's smaller than the shrinkwrap size,
+         we should max out at that size.-->
+    <div class="flexbox" style="max-height: 70px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- The max-size may be small enough that our items will overflow. -->
+    <div class="flexbox" style="max-height: 20px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- But if we add a min-size, it beats the max-size. Here, we use a
+         min-size smaller than the sum of the items' base sizes... -->
+    <div class="flexbox" style="min-height: 58px; max-height: 20px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- ...and here we use a min-size larger than the sum of the items'
+         base sizes. -->
+    <div class="flexbox" style="min-height: 140px; max-height: 20px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-fixup-1-ref.xhtml b/layout/reftests/flexbox/flexbox-table-fixup-1-ref.xhtml
new file mode 100644
index 000000000000..4f8f46b7a7f9
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-fixup-1-ref.xhtml
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for table-fixup on table parts inside of a
+     flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        border: 1px dashed blue;
+      }
+
+      <!-- NOTE: table-fixup pads each td element by 1px on each side. We
+           override that for top & bottom, for simplicity. So the td makes us
+           generate a box that's 2px wider than its contents. -->
+      td {
+        padding-top: 0px;
+        padding-bottom: 0px;
+      }
+
+      .a {
+        background: lightgreen;
+        width: 48px;
+      }
+
+      .b {
+        background: yellow;
+        width: 48px;
+      }
+
+      .c {
+        background: pink;
+        width: 48px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Just 2 adjacent table cells (they end up in the same table) -->
+    <div class="flexbox" style="padding-left: 50px; width: 150px"
+         ><td class="a">cell1</td
+         ><td class="b">cell2</td
+    ></div>
+
+    <!-- Table cell followed by tbody (they end up in the same table) -->
+    <div class="flexbox" style="padding-left: 75px; width: 125px"
+         ><td class="a">cell1</td
+         ><tbody class="b">t</tbody
+    ></div>
+
+    <!-- Empty table cell (ends up occupying 2px of width), followed by div,
+         followed by nonempty table cell. (3 flex items). -->
+    <div class="flexbox" style="padding-left: 52px; width: 148px"
+         ><div style="display: inline-block;"  class="c">div</div
+         ><div style="display: inline-table; margin-left: 50px"><td class="b">cell1</td></div
+    ></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-fixup-1a.xhtml b/layout/reftests/flexbox/flexbox-table-fixup-1a.xhtml
new file mode 100644
index 000000000000..a9eeed03daeb
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-fixup-1a.xhtml
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     Testcase with table parts inside of a flex container, triggering
+     table-fixup.  We use -moz-justify-content:space-between to stick packing
+     space between flex items, so that we can verify that e.g. a contiguous
+     run of <td>s will end up in the same flex item (wrapped in a table).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+      }
+
+      <!-- NOTE: table-fixup pads each td element by 1px on each side. We
+           override that for top & bottom, for simplicity. So the td makes us
+           generate a box that's 2px wider than its contents. -->
+      td {
+        padding-top: 0px;
+        padding-bottom: 0px;
+      }
+
+      .a {
+        background: lightgreen;
+        width: 48px;
+      }
+
+      .b {
+        background: yellow;
+        width: 48px;
+      }
+
+      .c {
+        background: pink;
+        width: 48px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Just 2 adjacent table cells (they end up in the same table) -->
+    <div class="flexbox"
+         ><td class="a">cell1</td><td class="b">cell2</td></div>
+
+    <!-- Table cell followed by tbody (they end up in the same table) -->
+    <div class="flexbox"
+         ><td class="a">cell1</td><tbody class="b">t</tbody></div>
+
+    <!-- Empty table cell (ends up occupying 2px of width), followed by div,
+         followed by nonempty table cell. (3 flex items). -->
+    <!-- Note: We use "space-between" (instead of "space-around") here because
+         it makes the math cleaner. (100px split 2 ways instead of 3 ways.) -->
+    <div class="flexbox" style="-moz-justify-content: space-between"
+         ><td></td><div class="c">div</div><td class="b">cell1</td></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-fixup-1b.xhtml b/layout/reftests/flexbox/flexbox-table-fixup-1b.xhtml
new file mode 100644
index 000000000000..a574e4e7735a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-fixup-1b.xhtml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     Testcase with table parts inside of a flex container, triggering
+     table-fixup.  We use -moz-justify-content:space-between to stick packing
+     space between flex items, so that we can verify that e.g. a contiguous
+     run of <td>s will end up in the same flex item (wrapped in a table).
+
+     In this variant of the test, we also assign '-moz-flex' values to the
+     table parts - these values should have no effect, since these children
+     don't themselves form flex items.  The -moz-flex property _is_ honored on
+     the <div class="c">, though, because _its_ box _is_ a direct child of a
+     flexbox, so it _is_ a flex item.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+      }
+
+      <!-- NOTE: table-fixup pads each td element by 1px on each side. We
+           override that for top & bottom, for simplicity. So the td makes us
+           generate a box that's 2px wider than its contents. -->
+      td {
+        padding-top: 0px;
+        padding-bottom: 0px;
+      }
+
+      .a {
+        background: lightgreen;
+        width: 48px;
+        -moz-flex: 5 3 100px;
+      }
+
+      .b {
+        background: yellow;
+        width: 48px;
+        -moz-flex: 1 2 3px;
+      }
+
+      .c {
+        background: pink;
+        -moz-flex: 0 0 48px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Just 2 adjacent table cells (they end up in the same table) -->
+    <div class="flexbox"
+         ><td class="a">cell1</td><td class="b">cell2</td></div>
+
+    <!-- Table cell followed by tbody (they end up in the same table) -->
+    <div class="flexbox"
+         ><td class="a">cell1</td><tbody class="b">t</tbody></div>
+
+    <!-- Empty table cell (ends up occupying 2px of width), followed by div,
+         followed by nonempty table cell. (3 flex items). -->
+    <!-- Note: We use "space-between" (instead of "space-around") here because
+         it makes the math cleaner. (100px split 2 ways instead of 3 ways.) -->
+    <div class="flexbox" style="-moz-justify-content: space-between"
+         ><td></td><div class="c">div</div><td class="b">cell1</td></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-whitespace-handling-1-ref.xhtml b/layout/reftests/flexbox/flexbox-whitespace-handling-1-ref.xhtml
new file mode 100644
index 000000000000..15c7941bae3c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-whitespace-handling-1-ref.xhtml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     Reference case, with inline-blocks instead of flexbox/flex items,
+     with positioning done using margins.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+      }
+      div.a {
+        width: 30px;
+        background: lightgreen;
+        display: inline-block;
+      }
+      div.b {
+        width: 20px;
+        background: lightblue;
+        display: inline-block;
+      }
+      img {
+        width: 40px;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 85px"/>
+    </div>
+
+    <div class="flexbox">
+      <div class="a" style="margin-left: 37.5px"
+           /><div class="b" style="margin-left: 75px"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="solidblue.png" style="margin-left: 30px"
+           /><img src="solidblue.png" style="margin-left: 60px"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-whitespace-handling-1a.xhtml b/layout/reftests/flexbox/flexbox-whitespace-handling-1a.xhtml
new file mode 100644
index 000000000000..5e3759aca827
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-whitespace-handling-1a.xhtml
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that we don't create anonymous flex items around
+     runs of inline content that are _purely_ whitespace.
+
+     The test uses "white-space: pre", to try to tempt us into honoring
+     that whitespace. (but we should resist that temptation).
+
+     The test also uses '-moz-justify-content: space-around' to be sure we can
+     tell whether anonymous flex items are being created around the whitespace
+     (since they'd claim a share of the packing space if they were there).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        white-space: pre;
+        border: 1px dashed blue;
+        width: 200px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+      }
+      div.a {
+        -moz-flex: none;
+        width: 30px;
+        background: lightgreen;
+      }
+      div.b {
+        -moz-flex: none;
+        width: 20px;
+        background: lightblue;
+      }
+      img { width: 40px; }
+    </style>
+  </head>
+  <body>
+    <!-- whitespace & tab after flex item -->
+    <div class="flexbox"><div class="a"/> 	</div>
+
+    <!-- 2 spaces before flex item -->
+    <div class="flexbox">  <div class="a"/><div class="b"/></div>
+
+    <!-- newline & whitespace between flex items  -->
+    <div class="flexbox"><img src="solidblue.png"/>
+      <img src="solidblue.png"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-whitespace-handling-1b.xhtml b/layout/reftests/flexbox/flexbox-whitespace-handling-1b.xhtml
new file mode 100644
index 000000000000..8f407aed8c14
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-whitespace-handling-1b.xhtml
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test is like the -1a variant, but with the whitespace removed between
+     flex items (since that whitespace should be ignored anyway, if we're
+     doing things right).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+      }
+      div.a {
+        width: 30px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        background: lightblue;
+      }
+      img { width: 40px; }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"/></div>
+
+    <div class="flexbox"><div class="a"/><div class="b"/></div>
+
+    <div class="flexbox"
+      ><img src="solidblue.png"
+     /><img src="solidblue.png"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-whitespace-handling-2-ref.xhtml b/layout/reftests/flexbox/flexbox-whitespace-handling-2-ref.xhtml
new file mode 100644
index 000000000000..2380e41fcc2f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-whitespace-handling-2-ref.xhtml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This reference case is the same as the testcase, but with an explicit <div>
+     around each run of content that we expect to turn into an anonymous
+     flex item (to ensure that the whitespace is included).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <link rel="stylesheet" type="text/css" href="ahem.css" />
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        white-space: pre;
+        border: 1px dashed blue;
+        width: 200px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+      }
+      div.a {
+        width: 30px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        background: lightblue;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- spaces around inline content at the beginning of flexbox -->
+    <div class="flexbox"><div>  abc</div><div class="a"/></div>
+    <div class="flexbox"><div>abc   </div><div class="a"/></div>
+    <div class="flexbox"><div>  abc   </div><div class="a"/></div>
+
+    <!-- spaces around inline content at the end of flexbox -->
+    <div class="flexbox"><div class="a"/><div>  abc</div></div>
+    <div class="flexbox"><div class="a"/><div>abc   </div></div>
+    <div class="flexbox"><div class="a"/><div>  abc   </div></div>
+
+    <!-- whitespace around inline content in between flex items -->
+    <div class="flexbox"><div class="a"/><div>  abc</div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div>abc   </div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div>  abc   </div><div class="b"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-whitespace-handling-2.xhtml b/layout/reftests/flexbox/flexbox-whitespace-handling-2.xhtml
new file mode 100644
index 000000000000..d879d37c0024
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-whitespace-handling-2.xhtml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that we preserve whitespace at the beginning & end of
+     anonymous flex items (using "white-space: pre" so that it actually
+     occupies space and affects the rendering).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <link rel="stylesheet" type="text/css" href="ahem.css" />
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        white-space: pre;
+        border: 1px dashed blue;
+        width: 200px;
+        display: -moz-flex;
+        -moz-justify-content: space-around;
+      }
+      div.a {
+        width: 30px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        background: lightblue;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- spaces around inline content at the beginning of flexbox -->
+    <div class="flexbox">  abc<div class="a"/></div>
+    <div class="flexbox">abc   <div class="a"/></div>
+    <div class="flexbox">  abc   <div class="a"/></div>
+
+    <!-- spaces around inline content at the end of flexbox -->
+    <div class="flexbox"><div class="a"/>  abc</div>
+    <div class="flexbox"><div class="a"/>abc   </div>
+    <div class="flexbox"><div class="a"/>  abc   </div>
+
+    <!-- whitespace around inline content in between flex items -->
+    <div class="flexbox"><div class="a"/>  abc<div class="b"/></div>
+    <div class="flexbox"><div class="a"/>abc   <div class="b"/></div>
+    <div class="flexbox"><div class="a"/>  abc   <div class="b"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-whitespace-handling-3-ref.xhtml b/layout/reftests/flexbox/flexbox-whitespace-handling-3-ref.xhtml
new file mode 100644
index 000000000000..66cbe9787bdb
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-whitespace-handling-3-ref.xhtml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This reference case is like its testcase, but with all of the <span>
+     wrappers removed, since (if we're doing things right) they shouldn't
+     affect our rendering.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <link rel="stylesheet" type="text/css" href="ahem.css" />
+    <style>
+      div.flexbox {
+        border: 1px dashed blue;
+        display: -moz-flex;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">abc def</div>
+    <div class="flexbox">abc def</div>
+    <div class="flexbox">abc def</div>
+    <div class="flexbox">abc def</div>
+    <div class="flexbox">abc def</div>
+    <div class="flexbox">abc def</div>
+    <div class="flexbox">abc def</div>
+    <div class="flexbox">abc def</div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-whitespace-handling-3.xhtml b/layout/reftests/flexbox/flexbox-whitespace-handling-3.xhtml
new file mode 100644
index 000000000000..11d5e8065013
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-whitespace-handling-3.xhtml
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that we don't drop whitespace between consecutive
+     inline boxes inside of an anonymous flex item. In other words, it
+     verifies that "<span>abc</span> <span>def</span>" renders like "abc def",
+     and more variants on that theme.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <link rel="stylesheet" type="text/css" href="ahem.css" />
+    <style>
+      div.flexbox {
+        border: 1px dashed blue;
+        display: -moz-flex;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">abc def</div>
+    <div class="flexbox">abc <span>def</span></div>
+    <div class="flexbox"><span>abc</span> def</div>
+    <div class="flexbox"><span>abc</span> <span>def</span></div>
+
+    <!-- ...and now with whitespace just inside the <span> elements, for extra
+         fun. (Shouldn't be visible.) -->
+    <div class="flexbox">abc def</div>
+    <div class="flexbox">abc <span>  def  </span></div>
+    <div class="flexbox"><span> abc </span> def</div>
+    <div class="flexbox"><span> abc </span> <span> def </span></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-1-ref.html b/layout/reftests/flexbox/flexbox-widget-flex-items-1-ref.html
new file mode 100644
index 000000000000..da38ef95331c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-1-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <style>
+    div.flexbox {
+      border: 2px dotted lightgray;
+      width: 400px;
+      height: 30px;
+      margin-bottom: 10px;
+    }
+    div.flexbox > * {
+      width: -moz-available;
+      outline: 1px dashed black;
+      margin: 0;
+      vertical-align: top;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexbox"><input type="button"></div>
+  <div class="flexbox"><input type="checkbox"></div>
+  <div class="flexbox"><input type="file"></div>
+  <div class="flexbox"><input type="image"></div>
+  <div class="flexbox"><input type="password"></div>
+  <div class="flexbox"><input type="radio"></div>
+  <div class="flexbox"><input type="reset"></div>
+  <div class="flexbox"><input type="submit"></div>
+  <div class="flexbox"><input type="text"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-1.html b/layout/reftests/flexbox/flexbox-widget-flex-items-1.html
new file mode 100644
index 000000000000..64e1ec1c8cb7
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-1.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+    This testcase checks that flex containers honor those widgets (if any) in
+    our system theme that have only a single valid size (and hence should
+    refuse to flex).
+
+    e.g. in Gecko with a GTK theme, checkboxes and radio buttons have a single
+    valid size, and any specified widths (and min/max-widths) will have no
+    effect on their rendering (regardless of whether they're in a flex
+    container).
+-->
+<html>
+<head>
+  <style>
+    div.flexbox {
+      display: -moz-flex;
+      -moz-align-items: flex-start;
+      border: 2px dotted lightgray;
+      width: 400px;
+      height: 30px;
+      margin-bottom: 10px;
+    }
+    div.flexbox > * {
+      -moz-flex: 1;
+      outline: 1px dashed black;
+      margin: 0;
+      vertical-align: top;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexbox"><input type="button"></div>
+  <div class="flexbox"><input type="checkbox"></div>
+  <div class="flexbox"><input type="file"></div>
+  <div class="flexbox"><input type="image"></div>
+  <div class="flexbox"><input type="password"></div>
+  <div class="flexbox"><input type="radio"></div>
+  <div class="flexbox"><input type="reset"></div>
+  <div class="flexbox"><input type="submit"></div>
+  <div class="flexbox"><input type="text"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-2-ref.html b/layout/reftests/flexbox/flexbox-widget-flex-items-2-ref.html
new file mode 100644
index 000000000000..8a2bd8372ec7
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-2-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <style>
+    div.flexbox {
+      background: lightgray;
+      width: 400px;
+      height: 30px;
+      margin-bottom: 10px;
+    }
+    div.flexbox > * {
+      min-width: 350px;
+      outline: 1px dashed black;
+      margin: 0;
+      vertical-align: top;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexbox"><input type="button"></div>
+  <div class="flexbox"><input type="checkbox"></div>
+  <div class="flexbox"><input type="file"></div>
+  <div class="flexbox"><input type="image"></div>
+  <div class="flexbox"><input type="password"></div>
+  <div class="flexbox"><input type="radio"></div>
+  <div class="flexbox"><input type="reset"></div>
+  <div class="flexbox"><input type="submit"></div>
+  <div class="flexbox"><input type="text"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-2.html b/layout/reftests/flexbox/flexbox-widget-flex-items-2.html
new file mode 100644
index 000000000000..b1a1c60e64fa
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-2.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+    This testcase checks that, for any widgets that have a single valid size
+    (and hence refuse to flex), we don't honor the "min-width" property
+    when running the flex algorithm, just as we don't honor it outside
+    of flexbox contexts.
+-->
+<html>
+<head>
+  <style>
+    div.flexbox {
+      display: -moz-flex;
+      -moz-align-items: flex-start;
+      background: lightgray;
+      width: 400px;
+      height: 30px;
+      margin-bottom: 10px;
+    }
+    div.flexbox > * {
+      min-width: 350px;
+      outline: 1px dashed black;
+      margin: 0;
+      vertical-align: top;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexbox"><input type="button"></div>
+  <div class="flexbox"><input type="checkbox"></div>
+  <div class="flexbox"><input type="file"></div>
+  <div class="flexbox"><input type="image"></div>
+  <div class="flexbox"><input type="password"></div>
+  <div class="flexbox"><input type="radio"></div>
+  <div class="flexbox"><input type="reset"></div>
+  <div class="flexbox"><input type="submit"></div>
+  <div class="flexbox"><input type="text"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-3-ref.html b/layout/reftests/flexbox/flexbox-widget-flex-items-3-ref.html
new file mode 100644
index 000000000000..afc037801443
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-3-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <style>
+    div.flexbox {
+      background: lightgray;
+      width: 400px;
+      height: 30px;
+      margin-bottom: 10px;
+    }
+    div.flexbox > * {
+      max-width: 3px;
+      outline: 1px dashed black;
+      margin: 0;
+      vertical-align: top;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexbox"><input type="button"></div>
+  <div class="flexbox"><input type="checkbox"></div>
+  <div class="flexbox"><input type="file"></div>
+  <div class="flexbox"><input type="image"></div>
+  <div class="flexbox"><input type="password"></div>
+  <div class="flexbox"><input type="radio"></div>
+  <div class="flexbox"><input type="reset"></div>
+  <div class="flexbox"><input type="submit"></div>
+  <div class="flexbox"><input type="text"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-3.html b/layout/reftests/flexbox/flexbox-widget-flex-items-3.html
new file mode 100644
index 000000000000..218ca297a6ee
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-3.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+    This testcase checks that, for any widgets that have a single valid size
+    (and hence refuse to flex), we don't honor the "max-width" property
+    when running the flex algorithm, just as we don't honor it outside
+    of flexbox contexts.
+-->
+<html>
+<head>
+  <style>
+    div.flexbox {
+      display: -moz-flex;
+      -moz-align-items: flex-start;
+      background: lightgray;
+      width: 400px;
+      height: 30px;
+      margin-bottom: 10px;
+    }
+    div.flexbox > * {
+      max-width: 3px;
+      min-width: 0; /* to override default 'min-width:auto' */
+      outline: 1px dashed black;
+      margin: 0;
+      vertical-align: top;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexbox"><input type="button"></div>
+  <div class="flexbox"><input type="checkbox"></div>
+  <div class="flexbox"><input type="file"></div>
+  <div class="flexbox"><input type="image"></div>
+  <div class="flexbox"><input type="password"></div>
+  <div class="flexbox"><input type="radio"></div>
+  <div class="flexbox"><input type="reset"></div>
+  <div class="flexbox"><input type="submit"></div>
+  <div class="flexbox"><input type="text"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-4-ref.html b/layout/reftests/flexbox/flexbox-widget-flex-items-4-ref.html
new file mode 100644
index 000000000000..b9b215b56f8e
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-4-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <style>
+    div.flexbox {
+      background: lightgray;
+      width: -moz-max-content;
+      float: left;
+      height: 60px;
+      margin-right: 10px;
+    }
+    div.flexbox > * {
+      outline: 1px dashed black;
+      margin: 0;
+      -moz-align-self: stretch;
+      vertical-align: top;
+      height: 100%;
+    }
+    br { clear: left; }
+  </style>
+</head>
+<body>
+  <div class="flexbox"><input type="button"></div>
+  <div class="flexbox"><input type="checkbox"></div>
+  <br>
+  <div class="flexbox"><input type="image"></div>
+  <div class="flexbox"><input type="radio"></div>
+  <br>
+  <div class="flexbox"><input type="reset"></div>
+  <div class="flexbox"><input type="submit"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-4.html b/layout/reftests/flexbox/flexbox-widget-flex-items-4.html
new file mode 100644
index 000000000000..299c4338daed
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-4.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+    This testcase checks that, for any widgets that have a single valid size
+    (and hence refuse to flex), we don't stretch them in the cross-axis,
+    despite the "align-self: stretch" property.
+-->
+<html>
+<head>
+  <style>
+    div.flexbox {
+      display: -moz-flex;
+      background: lightgray;
+      width: -moz-max-content;
+      float: left;
+      height: 60px;
+      margin-right: 10px;
+    }
+    div.flexbox > * {
+      outline: 1px dashed black;
+      margin: 0;
+      -moz-align-self: stretch;
+      vertical-align: top;
+      height: auto;
+    }
+    br { clear: left; }
+  </style>
+</head>
+<body>
+  <div class="flexbox"><input type="button"></div>
+  <div class="flexbox"><input type="checkbox"></div>
+  <br>
+  <div class="flexbox"><input type="image"></div>
+  <div class="flexbox"><input type="radio"></div>
+  <br>
+  <div class="flexbox"><input type="reset"></div>
+  <div class="flexbox"><input type="submit"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/reftest.list b/layout/reftests/flexbox/reftest.list
new file mode 100644
index 000000000000..acfafb2705bf
--- /dev/null
+++ b/layout/reftests/flexbox/reftest.list
@@ -0,0 +1,162 @@
+# 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
+fails == flexbox-align-self-baseline-horiz-2.xhtml  flexbox-align-self-baseline-horiz-2-ref.xhtml # bug 793456, and possibly others
+# This one fails on windows R (but not Ru, strangely). On Windows R, the
+# single-line <label> flex item has a different background size in test vs. ref
+random-if(winWidget) == flexbox-align-self-baseline-horiz-3.xhtml  flexbox-align-self-baseline-horiz-3-ref.xhtml # XXXdholbert investigate
+== flexbox-align-self-horiz-1.xhtml  flexbox-align-self-horiz-1-ref.xhtml
+== flexbox-align-self-horiz-2.xhtml  flexbox-align-self-horiz-2-ref.xhtml
+== flexbox-align-self-horiz-3.xhtml  flexbox-align-self-horiz-3-ref.xhtml
+== flexbox-align-self-horiz-4.xhtml  flexbox-align-self-horiz-4-ref.xhtml
+== flexbox-align-self-horiz-5.xhtml  flexbox-align-self-horiz-5-ref.xhtml
+== flexbox-align-self-vert-1.xhtml  flexbox-align-self-vert-1-ref.xhtml
+== flexbox-align-self-vert-2.xhtml  flexbox-align-self-vert-2-ref.xhtml
+== flexbox-align-self-vert-3.xhtml  flexbox-align-self-vert-3-ref.xhtml
+== flexbox-align-self-vert-4.xhtml  flexbox-align-self-vert-4-ref.xhtml
+== flexbox-align-self-vert-rtl-1.xhtml  flexbox-align-self-vert-rtl-1-ref.xhtml
+== flexbox-align-self-vert-rtl-2.xhtml  flexbox-align-self-vert-rtl-2-ref.xhtml
+== flexbox-align-self-vert-rtl-3.xhtml  flexbox-align-self-vert-rtl-3-ref.xhtml
+== flexbox-align-self-vert-rtl-4.xhtml  flexbox-align-self-vert-rtl-4-ref.xhtml
+
+# Basic tests with with blocks as flex items
+== flexbox-basic-block-horiz-1.xhtml flexbox-basic-block-horiz-1-ref.xhtml
+== flexbox-basic-block-vert-1.xhtml flexbox-basic-block-vert-1-ref.xhtml
+
+# Tests for basic handling of <canvas>/<img>/etc as a flex item
+== flexbox-basic-canvas-horiz-1.xhtml   flexbox-basic-canvas-horiz-1-ref.xhtml
+== flexbox-basic-canvas-horiz-2.xhtml   flexbox-basic-canvas-horiz-2-ref.xhtml
+== flexbox-basic-canvas-vert-1.xhtml    flexbox-basic-canvas-vert-1-ref.xhtml
+fails == flexbox-basic-canvas-vert-2.xhtml flexbox-basic-canvas-vert-2-ref.xhtml # bug 794660
+== flexbox-basic-fieldset-horiz-1.xhtml flexbox-basic-fieldset-horiz-1-ref.xhtml
+== flexbox-basic-fieldset-horiz-2.xhtml flexbox-basic-fieldset-horiz-2-ref.xhtml
+== flexbox-basic-fieldset-vert-1.xhtml  flexbox-basic-fieldset-vert-1-ref.xhtml
+== flexbox-basic-fieldset-vert-2.xhtml  flexbox-basic-fieldset-vert-2-ref.xhtml
+== flexbox-basic-iframe-horiz-1.xhtml   flexbox-basic-iframe-horiz-1-ref.xhtml
+== flexbox-basic-iframe-horiz-2.xhtml   flexbox-basic-iframe-horiz-2-ref.xhtml
+== flexbox-basic-iframe-vert-1.xhtml    flexbox-basic-iframe-vert-1-ref.xhtml
+== flexbox-basic-iframe-vert-2.xhtml    flexbox-basic-iframe-vert-2-ref.xhtml
+== flexbox-basic-img-horiz-1.xhtml      flexbox-basic-img-horiz-1-ref.xhtml
+== flexbox-basic-img-horiz-2.xhtml      flexbox-basic-img-horiz-2-ref.xhtml
+== flexbox-basic-img-vert-1.xhtml       flexbox-basic-img-vert-1-ref.xhtml
+fails == flexbox-basic-img-vert-2.xhtml flexbox-basic-img-vert-2-ref.xhtml # bug 794660
+== flexbox-basic-textarea-horiz-1.xhtml flexbox-basic-textarea-horiz-1-ref.xhtml
+== flexbox-basic-textarea-horiz-2.xhtml flexbox-basic-textarea-horiz-2-ref.xhtml
+== flexbox-basic-textarea-vert-1.xhtml  flexbox-basic-textarea-vert-1-ref.xhtml
+== flexbox-basic-textarea-vert-2.xhtml  flexbox-basic-textarea-vert-2-ref.xhtml
+== flexbox-basic-video-horiz-1.xhtml    flexbox-basic-video-horiz-1-ref.xhtml
+== flexbox-basic-video-horiz-2.xhtml    flexbox-basic-video-horiz-2-ref.xhtml
+== flexbox-basic-video-vert-1.xhtml     flexbox-basic-video-vert-1-ref.xhtml
+fails == flexbox-basic-video-vert-2.xhtml flexbox-basic-video-vert-2-ref.xhtml # bug 794660
+
+# Tests for dynamic modifications to flexboxes
+# (with existing [div | span | text] inside the flexbox, and new content
+# inserted adjacent to that existing content.)
+== flexbox-dyn-insertAroundDiv-1.xhtml flexbox-dyn-insertAroundDiv-1-ref.xhtml
+== flexbox-dyn-insertAroundDiv-2.xhtml flexbox-dyn-insertAroundDiv-2-ref.xhtml
+fails-if(Android) == flexbox-dyn-insertAroundDiv-3.xhtml flexbox-dyn-insertAroundDiv-3-ref.xhtml
+
+== flexbox-dyn-insertAroundSpan-1.xhtml flexbox-dyn-insertAroundText-1-ref.xhtml
+== flexbox-dyn-insertAroundSpan-2.xhtml flexbox-dyn-insertAroundText-2-ref.xhtml
+fails-if(Android) == flexbox-dyn-insertAroundSpan-3.xhtml flexbox-dyn-insertAroundText-3-ref.xhtml
+
+== flexbox-dyn-insertAroundText-1.xhtml flexbox-dyn-insertAroundText-1-ref.xhtml
+== flexbox-dyn-insertAroundText-2.xhtml flexbox-dyn-insertAroundText-2-ref.xhtml
+fails-if(Android) == flexbox-dyn-insertAroundText-3.xhtml flexbox-dyn-insertAroundText-3-ref.xhtml
+
+# Variant of one of the above tests, to regression-test an invalidation issue
+== flexbox-dyn-insertEmptySpan-1.xhtml flexbox-dyn-insertEmptySpan-1-ref.xhtml
+
+# Tests for empty flexboxes (with no flex items)
+== flexbox-empty-1a.xhtml  flexbox-empty-1-ref.xhtml
+== flexbox-empty-1b.xhtml  flexbox-empty-1-ref.xhtml
+
+# Tests for handling of floated elements inside a flexbox
+== flexbox-float-1a.xhtml  flexbox-float-1-ref.xhtml
+== flexbox-float-1b.xhtml  flexbox-float-1-ref.xhtml
+== flexbox-float-1c.xhtml  flexbox-float-1-ref.xhtml
+== flexbox-float-1d.xhtml  flexbox-float-1-ref.xhtml
+== flexbox-float-2a.xhtml  flexbox-float-2-ref.xhtml
+== flexbox-float-2b.xhtml  flexbox-float-2-ref.xhtml
+
+# Tests for (default) "min-width: auto" / "min-height: auto" in flex containers
+== flexbox-minSize-horiz-1.xhtml flexbox-minSize-horiz-1-ref.xhtml
+== flexbox-minSize-vert-1.xhtml  flexbox-minSize-vert-1-ref.xhtml
+
+# Tests for handling of absolutely/fixed/relatively-positioned flex items.
+== flexbox-position-absolute-1.xhtml  flexbox-position-absolute-1-ref.xhtml
+== flexbox-position-absolute-2.xhtml  flexbox-position-absolute-2-ref.xhtml
+== flexbox-position-absolute-3.xhtml  flexbox-position-absolute-3-ref.xhtml
+== flexbox-position-absolute-4.xhtml  flexbox-position-absolute-4-ref.xhtml
+== flexbox-position-fixed-3.xhtml     flexbox-position-fixed-3-ref.xhtml
+== flexbox-position-fixed-1.xhtml     flexbox-position-fixed-1-ref.xhtml
+== flexbox-position-fixed-2.xhtml     flexbox-position-fixed-2-ref.xhtml
+== flexbox-position-fixed-3.xhtml     flexbox-position-fixed-3-ref.xhtml
+== flexbox-position-fixed-4.xhtml     flexbox-position-fixed-4-ref.xhtml
+
+# Tests for main-axis alignment (jusify-content property)
+== flexbox-justify-content-horiz-1.xhtml flexbox-justify-content-horiz-1-ref.xhtml
+== flexbox-justify-content-horiz-2.xhtml flexbox-justify-content-horiz-2-ref.xhtml
+== flexbox-justify-content-horiz-3.xhtml flexbox-justify-content-horiz-3-ref.xhtml
+== flexbox-justify-content-horiz-4.xhtml flexbox-justify-content-horiz-4-ref.xhtml
+== flexbox-justify-content-horiz-5.xhtml flexbox-justify-content-horiz-5-ref.xhtml
+== flexbox-justify-content-vert-1.xhtml flexbox-justify-content-vert-1-ref.xhtml
+== flexbox-justify-content-vert-2.xhtml flexbox-justify-content-vert-2-ref.xhtml
+== flexbox-justify-content-vert-3.xhtml flexbox-justify-content-vert-3-ref.xhtml
+== flexbox-justify-content-vert-4.xhtml flexbox-justify-content-vert-4-ref.xhtml
+== flexbox-justify-content-vert-5.xhtml flexbox-justify-content-vert-5-ref.xhtml
+
+# Tests for inline content in a flexbox that gets wrapped in an anonymous block
+# XXXdholbert: These will likely need to change once bug 783415 is fixed.
+HTTP(..) == flexbox-inlinecontent-horiz-1a.xhtml flexbox-inlinecontent-horiz-1-ref.xhtml
+HTTP(..) == flexbox-inlinecontent-horiz-1b.xhtml flexbox-inlinecontent-horiz-1-ref.xhtml
+== flexbox-inlinecontent-horiz-2.xhtml  flexbox-inlinecontent-horiz-2-ref.xhtml
+HTTP(..) == flexbox-inlinecontent-horiz-3a.xhtml flexbox-inlinecontent-horiz-3-ref.xhtml
+fails-if(Android) HTTP(..) == flexbox-inlinecontent-horiz-3b.xhtml flexbox-inlinecontent-horiz-3-ref.xhtml
+HTTP(..) == flexbox-inlinecontent-horiz-3c.xhtml flexbox-inlinecontent-horiz-3-ref.xhtml
+== flexbox-inlinecontent-horiz-4.xhtml  flexbox-inlinecontent-horiz-4-ref.xhtml
+== flexbox-inlinecontent-horiz-5.xhtml  flexbox-inlinecontent-horiz-5-ref.xhtml
+== flexbox-inlinecontent-horiz-6.xhtml  flexbox-inlinecontent-horiz-6-ref.xhtml
+
+# Tests for intrinsic sizing of flexboxes
+HTTP(..) == flexbox-intrinsic-sizing-horiz-1a.xhtml flexbox-intrinsic-sizing-horiz-1-ref.xhtml
+HTTP(..) == flexbox-intrinsic-sizing-horiz-1b.xhtml flexbox-intrinsic-sizing-horiz-1-ref.xhtml
+== flexbox-intrinsic-sizing-horiz-2a.xhtml flexbox-intrinsic-sizing-horiz-2-ref.xhtml
+== flexbox-intrinsic-sizing-horiz-2b.xhtml flexbox-intrinsic-sizing-horiz-2-ref.xhtml
+
+# Tests for invalidation after dynamic modifications
+== flexbox-invalidation-1.html flexbox-invalidation-1-ref.html
+
+# Tests for flexbox with margin, border, and/or padding on flex items
+== flexbox-margin-auto-horiz-1.xhtml     flexbox-margin-auto-horiz-1-ref.xhtml
+== flexbox-margin-auto-horiz-2.xhtml     flexbox-margin-auto-horiz-2-ref.xhtml
+== flexbox-mbp-horiz-1.xhtml             flexbox-mbp-horiz-1-ref.xhtml
+== flexbox-mbp-horiz-1-reverse.xhtml     flexbox-mbp-horiz-1-reverse-ref.xhtml
+== flexbox-mbp-horiz-1-rtl.xhtml         flexbox-mbp-horiz-1-reverse-ref.xhtml
+== flexbox-mbp-horiz-1-rtl-reverse.xhtml flexbox-mbp-horiz-1-ref.xhtml
+== flexbox-mbp-horiz-2a.xhtml            flexbox-mbp-horiz-2-ref.xhtml
+== flexbox-mbp-horiz-2b.xhtml            flexbox-mbp-horiz-2-ref.xhtml
+== flexbox-mbp-horiz-3.xhtml             flexbox-mbp-horiz-3-ref.xhtml
+== flexbox-mbp-horiz-3-reverse.xhtml     flexbox-mbp-horiz-3-reverse-ref.xhtml
+
+# Tests for flexbox in an iframe that gets resized.
+== flexbox-resizeviewport-1.xhtml flexbox-resizeviewport-1-ref.xhtml
+
+# Tests for sizing of flex containers, e.g. under min/max size constraints
+== flexbox-sizing-horiz-1.xhtml flexbox-sizing-horiz-1-ref.xhtml
+== flexbox-sizing-vert-1.xhtml  flexbox-sizing-vert-1-ref.xhtml
+
+== flexbox-table-fixup-1a.xhtml flexbox-table-fixup-1-ref.xhtml
+== flexbox-table-fixup-1b.xhtml flexbox-table-fixup-1-ref.xhtml
+
+# Tests for handling of whitespace within anonymous flex items.
+# XXXdholbert: These will likely need to change once bug 783415 is fixed.
+== flexbox-whitespace-handling-1a.xhtml flexbox-whitespace-handling-1-ref.xhtml
+== flexbox-whitespace-handling-1b.xhtml flexbox-whitespace-handling-1-ref.xhtml
+== flexbox-whitespace-handling-2.xhtml  flexbox-whitespace-handling-2-ref.xhtml
+== flexbox-whitespace-handling-3.xhtml  flexbox-whitespace-handling-3-ref.xhtml
+
+# Tests with widgets as flex items
+== flexbox-widget-flex-items-1.html flexbox-widget-flex-items-1-ref.html
+== flexbox-widget-flex-items-2.html flexbox-widget-flex-items-2-ref.html
+== flexbox-widget-flex-items-3.html flexbox-widget-flex-items-3-ref.html
+== flexbox-widget-flex-items-4.html flexbox-widget-flex-items-4-ref.html
diff --git a/layout/reftests/flexbox/solidblue.png b/layout/reftests/flexbox/solidblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..a64b6a4255c9f99fd7bb87449a6d798a3c7f039d
GIT binary patch
literal 135
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`Ea{HEjtmSN`?>!lvI6-MC9V-A
z!TD(=<%vb93;~Imc_n&&t|1C##(D;ZGV4@afoh~YT^vI!PA8`btowi7fiXeGG~r4^
dAah$cBg3=Pl8P(8`~sQG;OXk;vd$@?2>@O)C0qai

literal 0
HcmV?d00001

diff --git a/layout/reftests/reftest.list b/layout/reftests/reftest.list
index 0d32827e525e..ea9b4e47efd4 100644
--- a/layout/reftests/reftest.list
+++ b/layout/reftests/reftest.list
@@ -141,6 +141,10 @@ skip-if(Android||B2G) include first-letter/reftest.list
 # first-line/
 include first-line/reftest.list
 
+# flexbox (display: flex, display: inline-flex)
+# XXXdholbert Uncomment if MOZ_FLEXBOX is enabled:
+# include flexbox/reftest.list
+
 # floats/
 include floats/reftest.list