From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 02:47:55 +0200
Subject: Adding upstream version 124.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 layout/reftests/flexbox/ahem.css                   |   4 +
 .../flexbox-align-self-baseline-horiz-2-ref.xhtml  |  52 +++++
 .../flexbox-align-self-baseline-horiz-2.xhtml      |  56 ++++++
 .../flexbox-align-self-baseline-horiz-3-ref.xhtml  |  50 +++++
 .../flexbox-align-self-baseline-horiz-3.xhtml      |  46 +++++
 .../flexbox-align-self-baseline-horiz-4-ref.xhtml  |  38 ++++
 .../flexbox-align-self-baseline-horiz-4.xhtml      |  37 ++++
 ...lexbox-box-sizing-on-container-horiz-1-ref.html |  38 ++++
 .../flexbox-box-sizing-on-container-horiz-1.html   |  37 ++++
 ...flexbox-box-sizing-on-container-vert-1-ref.html |  37 ++++
 .../flexbox-box-sizing-on-container-vert-1.html    |  38 ++++
 .../flexbox-box-sizing-on-items-horiz-1-ref.html   |  60 ++++++
 .../flexbox-box-sizing-on-items-horiz-1a.html      |  60 ++++++
 .../flexbox-box-sizing-on-items-horiz-1b.html      |  60 ++++++
 .../flexbox-box-sizing-on-items-vert-1-ref.html    |  57 ++++++
 .../flexbox-box-sizing-on-items-vert-1a.html       |  61 ++++++
 .../flexbox-box-sizing-on-items-vert-1b.html       |  61 ++++++
 .../flexbox-bsize-keywords-no-stretch-1-ref.html   |  37 ++++
 .../flexbox-bsize-keywords-no-stretch-1.html       |  39 ++++
 .../flexbox/flexbox-dyn-changeContent-1-ref.html   |  27 +++
 .../flexbox/flexbox-dyn-changeContent-1.html       |  37 ++++
 .../flexbox/flexbox-dyn-changeContent-2-ref.html   |  30 +++
 .../flexbox/flexbox-dyn-changeContent-2.html       |  40 ++++
 .../flexbox-dyn-changeFrameWidth-1-iframe.html     |  24 +++
 .../flexbox-dyn-changeFrameWidth-1-ref.xhtml       |  19 ++
 .../flexbox/flexbox-dyn-changeFrameWidth-1.xhtml   |  33 ++++
 .../flexbox-dyn-changeFrameWidth-2-iframe.html     |  27 +++
 .../flexbox-dyn-changeFrameWidth-2-ref.xhtml       |  19 ++
 .../flexbox/flexbox-dyn-changeFrameWidth-2.xhtml   |  34 ++++
 .../flexbox-dyn-changeFrameWidth-3-iframe.html     |  29 +++
 .../flexbox-dyn-changeFrameWidth-3-ref.xhtml       |  19 ++
 .../flexbox/flexbox-dyn-changeFrameWidth-3.xhtml   |  34 ++++
 .../flexbox-dyn-changeFrameWidth-4-iframe.html     |  20 ++
 .../flexbox-dyn-changeFrameWidth-4-ref.xhtml       |  19 ++
 .../flexbox/flexbox-dyn-changeFrameWidth-4.xhtml   |  34 ++++
 .../flexbox/flexbox-dyn-changeOrder-1-ref.html     |  19 ++
 .../flexbox/flexbox-dyn-changeOrder-1a.html        |  56 ++++++
 .../flexbox/flexbox-dyn-changeOrder-1b.html        |  57 ++++++
 .../flexbox/flexbox-dyn-changePadding-1-ref.xhtml  |  20 ++
 .../flexbox/flexbox-dyn-changePadding-1a.xhtml     |  46 +++++
 .../flexbox/flexbox-dyn-changePadding-1b.xhtml     |  46 +++++
 .../flexbox-dyn-insertAroundDiv-1-ref.xhtml        |  39 ++++
 .../flexbox/flexbox-dyn-insertAroundDiv-1.xhtml    |  87 +++++++++
 .../flexbox-dyn-insertAroundDiv-2-ref.xhtml        |  41 ++++
 .../flexbox/flexbox-dyn-insertAroundDiv-2.xhtml    | 104 ++++++++++
 .../flexbox-dyn-insertAroundDiv-3-ref.xhtml        |  40 ++++
 .../flexbox/flexbox-dyn-insertAroundDiv-3.xhtml    | 104 ++++++++++
 .../flexbox/flexbox-dyn-insertAroundSpan-1.xhtml   |  87 +++++++++
 .../flexbox/flexbox-dyn-insertAroundSpan-2.xhtml   | 107 +++++++++++
 .../flexbox/flexbox-dyn-insertAroundSpan-3.xhtml   | 107 +++++++++++
 .../flexbox-dyn-insertAroundText-1-ref.xhtml       |  39 ++++
 .../flexbox/flexbox-dyn-insertAroundText-1.xhtml   |  87 +++++++++
 .../flexbox-dyn-insertAroundText-2-ref.xhtml       |  44 +++++
 .../flexbox/flexbox-dyn-insertAroundText-2.xhtml   | 107 +++++++++++
 .../flexbox-dyn-insertAroundText-3-ref.xhtml       |  43 +++++
 .../flexbox/flexbox-dyn-insertAroundText-3.xhtml   | 107 +++++++++++
 .../flexbox-dyn-insertEmptySpan-1-ref.xhtml        |  43 +++++
 .../flexbox/flexbox-dyn-insertEmptySpan-1.xhtml    | 103 ++++++++++
 layout/reftests/flexbox/flexbox-empty-1-ref.xhtml  |  38 ++++
 layout/reftests/flexbox/flexbox-empty-1a.xhtml     |  39 ++++
 layout/reftests/flexbox/flexbox-empty-1b.xhtml     |  45 +++++
 ...pty-container-synthesized-baseline-001-ref.html |  46 +++++
 ...x-empty-container-synthesized-baseline-001.html |  48 +++++
 layout/reftests/flexbox/flexbox-float-1-ref.xhtml  |  39 ++++
 layout/reftests/flexbox/flexbox-float-1a.xhtml     |  47 +++++
 layout/reftests/flexbox/flexbox-float-1b.xhtml     |  43 +++++
 layout/reftests/flexbox/flexbox-float-1c.xhtml     |  75 ++++++++
 layout/reftests/flexbox/flexbox-float-1d.xhtml     |  75 ++++++++
 layout/reftests/flexbox/flexbox-float-2-ref.xhtml  |  39 ++++
 layout/reftests/flexbox/flexbox-float-2a.xhtml     |  42 ++++
 layout/reftests/flexbox/flexbox-float-2b.xhtml     |  46 +++++
 .../flexbox-inlinecontent-horiz-1-ref.xhtml        |  45 +++++
 .../flexbox/flexbox-inlinecontent-horiz-1a.xhtml   |  39 ++++
 .../flexbox/flexbox-inlinecontent-horiz-1b.xhtml   |  55 ++++++
 .../flexbox-inlinecontent-horiz-2-ref.xhtml        |  34 ++++
 .../flexbox/flexbox-inlinecontent-horiz-2.xhtml    |  46 +++++
 .../flexbox-inlinecontent-horiz-3-ref.xhtml        |  22 +++
 .../flexbox/flexbox-inlinecontent-horiz-3a.xhtml   |  24 +++
 .../flexbox/flexbox-inlinecontent-horiz-3b.xhtml   |  38 ++++
 .../flexbox/flexbox-inlinecontent-horiz-3c.xhtml   |  38 ++++
 .../flexbox-inlinecontent-horiz-4-ref.xhtml        |  21 ++
 .../flexbox/flexbox-inlinecontent-horiz-4.xhtml    |  27 +++
 .../flexbox-inlinecontent-horiz-5-ref.xhtml        |  25 +++
 .../flexbox/flexbox-inlinecontent-horiz-5.xhtml    |  36 ++++
 .../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        |  41 ++++
 .../flexbox-intrinsic-sizing-horiz-2b.xhtml        |  44 +++++
 .../flexbox/flexbox-invalidation-1-ref.html        |  36 ++++
 .../reftests/flexbox/flexbox-invalidation-1.html   |  47 +++++
 ...lexbox-item-align-self-dynamic-pos-001-ref.html |  36 ++++
 .../flexbox-item-align-self-dynamic-pos-001.html   |  45 +++++
 ...lexbox-item-align-self-dynamic-pos-002-ref.html |  36 ++++
 .../flexbox-item-align-self-dynamic-pos-002.html   |  44 +++++
 .../flexbox-min-bsize-keywords-horiz-1-ref.html    |  41 ++++
 .../flexbox-min-bsize-keywords-horiz-1.html        |  50 +++++
 .../flexbox-min-bsize-keywords-vert-1-ref.html     |  39 ++++
 .../flexbox/flexbox-min-bsize-keywords-vert-1.html |  51 +++++
 .../flexbox/flexbox-position-absolute-1-ref.xhtml  |  74 +++++++
 .../flexbox/flexbox-position-absolute-1.xhtml      |  70 +++++++
 .../flexbox/flexbox-position-absolute-2-ref.xhtml  |  74 +++++++
 .../flexbox/flexbox-position-absolute-2.xhtml      |  71 +++++++
 .../flexbox/flexbox-position-absolute-3-ref.xhtml  |  44 +++++
 .../flexbox/flexbox-position-absolute-3.xhtml      |  46 +++++
 .../flexbox/flexbox-position-absolute-4-ref.xhtml  |  50 +++++
 .../flexbox/flexbox-position-absolute-4.xhtml      |  52 +++++
 .../flexbox/flexbox-position-fixed-1-ref.xhtml     |  74 +++++++
 .../flexbox/flexbox-position-fixed-1.xhtml         |  70 +++++++
 .../flexbox/flexbox-position-fixed-2-ref.xhtml     |  74 +++++++
 .../flexbox/flexbox-position-fixed-2.xhtml         |  71 +++++++
 .../flexbox/flexbox-position-fixed-3-ref.xhtml     |  44 +++++
 .../flexbox/flexbox-position-fixed-3.xhtml         |  46 +++++
 .../flexbox/flexbox-position-fixed-4-ref.xhtml     |  51 +++++
 .../flexbox/flexbox-position-fixed-4.xhtml         |  52 +++++
 .../flexbox/flexbox-resizeviewport-1-helper.html   |  31 +++
 .../flexbox/flexbox-resizeviewport-1-ref.xhtml     |  22 +++
 .../flexbox/flexbox-resizeviewport-1.xhtml         |  40 ++++
 .../flexbox/flexbox-resizeviewport-2-helper.html   |  32 +++
 .../flexbox/flexbox-resizeviewport-2-ref.xhtml     |  22 +++
 .../flexbox/flexbox-resizeviewport-2.xhtml         |  44 +++++
 .../flexbox/flexbox-styling-on-svg-1-ref.svg       |  10 +
 .../reftests/flexbox/flexbox-styling-on-svg-1.svg  |  15 ++
 .../flexbox/flexbox-table-flex-items-1-ref.html    |  59 ++++++
 .../flexbox/flexbox-table-flex-items-1.html        |  60 ++++++
 .../flexbox/flexbox-table-flex-items-2-ref.html    |  64 ++++++
 .../flexbox/flexbox-table-flex-items-2.html        |  73 +++++++
 .../flexbox/flexbox-table-flex-items-3-ref.html    |  66 +++++++
 .../flexbox/flexbox-table-flex-items-3.html        |  75 ++++++++
 .../flexbox/flexbox-table-flex-items-4-ref.html    |  50 +++++
 .../flexbox/flexbox-table-flex-items-4.html        |  54 ++++++
 .../flexbox/flexbox-table-flex-items-5-ref.html    |  45 +++++
 .../flexbox/flexbox-table-flex-items-5.html        |  52 +++++
 .../flexbox/flexbox-widget-flex-items-1-ref.html   |  35 ++++
 .../flexbox/flexbox-widget-flex-items-1.html       |  46 +++++
 .../flexbox/flexbox-widget-flex-items-2-ref.html   |  36 ++++
 .../flexbox/flexbox-widget-flex-items-2.html       |  42 ++++
 .../flexbox/flexbox-widget-flex-items-3-ref.html   |  35 ++++
 .../flexbox/flexbox-widget-flex-items-3.html       |  43 +++++
 .../flexbox/flexbox-widget-flex-items-4-ref.html   |  35 ++++
 .../flexbox/flexbox-widget-flex-items-4.html       |  46 +++++
 .../flexbox/pagination/flexbox-empty-1-ref.html    |  99 ++++++++++
 .../flexbox/pagination/flexbox-empty-1a.html       | 105 ++++++++++
 .../flexbox/pagination/flexbox-empty-1b.html       | 105 ++++++++++
 .../flexbox/pagination/flexbox-empty-1c.html       | 105 ++++++++++
 .../flexbox/pagination/flexbox-empty-1d.html       | 105 ++++++++++
 .../flexbox/pagination/flexbox-empty-1e.html       | 109 +++++++++++
 .../flexbox/pagination/flexbox-empty-1f.html       | 109 +++++++++++
 .../flexbox/pagination/flexbox-empty-1g.html       | 109 +++++++++++
 .../flexbox/pagination/flexbox-empty-1h.html       | 109 +++++++++++
 .../flexbox/pagination/flexbox-empty-2-ref.html    | 136 +++++++++++++
 .../flexbox/pagination/flexbox-empty-2a.html       | 138 +++++++++++++
 .../flexbox/pagination/flexbox-empty-2b.html       | 138 +++++++++++++
 .../flexbox/pagination/flexbox-empty-2c.html       | 138 +++++++++++++
 .../flexbox/pagination/flexbox-empty-2d.html       | 138 +++++++++++++
 .../pagination/flexbox-multi-column-1-ref.html     |  96 +++++++++
 .../pagination/flexbox-multi-column-1a.html        |  98 ++++++++++
 .../pagination/flexbox-multi-column-1b.html        |  98 ++++++++++
 .../pagination/flexbox-multi-column-1c.html        |  99 ++++++++++
 .../pagination/flexbox-multi-column-1d.html        | 103 ++++++++++
 .../pagination/flexbox-multi-column-1e.html        | 111 +++++++++++
 .../pagination/flexbox-multi-column-1f.html        | 111 +++++++++++
 .../pagination/flexbox-multi-column-1g.html        | 112 +++++++++++
 .../pagination/flexbox-multi-column-1h.html        | 112 +++++++++++
 .../pagination/flexbox-multi-column-1i.html        | 112 +++++++++++
 .../pagination/flexbox-multi-column-1j.html        | 112 +++++++++++
 .../pagination/flexbox-multi-column-2-ref.html     | 109 +++++++++++
 .../flexbox/pagination/flexbox-multi-column-2.html | 101 ++++++++++
 .../flexbox-multi-column-vertical-lr-1-ref.html    |  99 ++++++++++
 .../flexbox-multi-column-vertical-lr-1a.html       | 101 ++++++++++
 .../flexbox-multi-column-vertical-lr-1b.html       | 101 ++++++++++
 .../flexbox-multi-column-vertical-lr-1c.html       | 102 ++++++++++
 .../flexbox-multi-column-vertical-lr-1d.html       | 106 ++++++++++
 .../flexbox-multi-column-vertical-lr-1e.html       | 114 +++++++++++
 .../flexbox-multi-column-vertical-lr-1f.html       | 114 +++++++++++
 .../flexbox-multi-column-vertical-lr-1g.html       | 115 +++++++++++
 .../flexbox-multi-column-vertical-lr-1h.html       | 115 +++++++++++
 .../flexbox-multi-column-vertical-lr-1i.html       | 115 +++++++++++
 .../flexbox-multi-column-vertical-lr-1j.html       | 115 +++++++++++
 .../flexbox-multi-column-vertical-lr-2-ref.html    | 112 +++++++++++
 .../flexbox-multi-column-vertical-lr-2.html        | 104 ++++++++++
 .../flexbox-multi-column-vertical-rl-1-ref.html    |  99 ++++++++++
 .../flexbox-multi-column-vertical-rl-1a.html       | 101 ++++++++++
 .../flexbox-multi-column-vertical-rl-1b.html       | 101 ++++++++++
 .../flexbox-multi-column-vertical-rl-1c.html       | 102 ++++++++++
 .../flexbox-multi-column-vertical-rl-1d.html       | 106 ++++++++++
 .../flexbox-multi-column-vertical-rl-1e.html       | 114 +++++++++++
 .../flexbox-multi-column-vertical-rl-1f.html       | 114 +++++++++++
 .../flexbox-multi-column-vertical-rl-1g.html       | 115 +++++++++++
 .../flexbox-multi-column-vertical-rl-1h.html       | 115 +++++++++++
 .../flexbox-multi-column-vertical-rl-1i.html       | 115 +++++++++++
 .../flexbox-multi-column-vertical-rl-1j.html       | 115 +++++++++++
 .../flexbox-multi-column-vertical-rl-2-ref.html    | 112 +++++++++++
 .../flexbox-multi-column-vertical-rl-2.html        | 104 ++++++++++
 .../pagination/flexbox-multi-row-1-ref.html        | 108 +++++++++++
 .../flexbox/pagination/flexbox-multi-row-1a.html   | 106 ++++++++++
 .../flexbox/pagination/flexbox-multi-row-1b.html   | 106 ++++++++++
 .../flexbox/pagination/flexbox-multi-row-1c.html   | 120 ++++++++++++
 .../flexbox/pagination/flexbox-multi-row-1d.html   | 120 ++++++++++++
 .../flexbox/pagination/flexbox-multi-row-1e.html   | 120 ++++++++++++
 .../flexbox/pagination/flexbox-multi-row-1f.html   | 120 ++++++++++++
 .../pagination/flexbox-multi-row-2-ref.html        | 116 +++++++++++
 .../flexbox/pagination/flexbox-multi-row-2a.html   | 107 +++++++++++
 .../flexbox/pagination/flexbox-multi-row-2b.html   | 108 +++++++++++
 .../flexbox-multi-row-vertical-lr-1-ref.html       | 111 +++++++++++
 .../flexbox-multi-row-vertical-lr-1a.html          | 109 +++++++++++
 .../flexbox-multi-row-vertical-lr-1b.html          | 109 +++++++++++
 .../flexbox-multi-row-vertical-lr-1c.html          | 123 ++++++++++++
 .../flexbox-multi-row-vertical-lr-1d.html          | 123 ++++++++++++
 .../flexbox-multi-row-vertical-lr-1e.html          | 123 ++++++++++++
 .../flexbox-multi-row-vertical-lr-1f.html          | 123 ++++++++++++
 .../flexbox-multi-row-vertical-lr-2-ref.html       | 119 ++++++++++++
 .../flexbox-multi-row-vertical-lr-2a.html          | 110 +++++++++++
 .../flexbox-multi-row-vertical-lr-2b.html          | 111 +++++++++++
 .../flexbox-multi-row-vertical-rl-1-ref.html       | 111 +++++++++++
 .../flexbox-multi-row-vertical-rl-1a.html          | 109 +++++++++++
 .../flexbox-multi-row-vertical-rl-1b.html          | 109 +++++++++++
 .../flexbox-multi-row-vertical-rl-1c.html          | 123 ++++++++++++
 .../flexbox-multi-row-vertical-rl-1d.html          | 123 ++++++++++++
 .../flexbox-multi-row-vertical-rl-1e.html          | 123 ++++++++++++
 .../flexbox-multi-row-vertical-rl-1f.html          | 123 ++++++++++++
 .../flexbox-multi-row-vertical-rl-2-ref.html       | 119 ++++++++++++
 .../flexbox-multi-row-vertical-rl-2a.html          | 110 +++++++++++
 .../flexbox-multi-row-vertical-rl-2b.html          | 111 +++++++++++
 .../pagination/flexbox-single-column-1-ref.html    |  96 +++++++++
 .../pagination/flexbox-single-column-1a.html       |  98 ++++++++++
 .../pagination/flexbox-single-column-1b.html       |  98 ++++++++++
 .../pagination/flexbox-single-column-1c.html       |  99 ++++++++++
 .../pagination/flexbox-single-column-1d.html       | 103 ++++++++++
 .../pagination/flexbox-single-column-1e.html       | 111 +++++++++++
 .../pagination/flexbox-single-column-1f.html       | 111 +++++++++++
 .../pagination/flexbox-single-column-1g.html       | 112 +++++++++++
 .../pagination/flexbox-single-column-1h.html       | 112 +++++++++++
 .../pagination/flexbox-single-column-1i.html       | 112 +++++++++++
 .../pagination/flexbox-single-column-1j.html       | 112 +++++++++++
 .../pagination/flexbox-single-column-2-ref.html    |  97 ++++++++++
 .../pagination/flexbox-single-column-2.html        | 103 ++++++++++
 .../pagination/flexbox-single-column-3-ref.html    |  78 ++++++++
 .../pagination/flexbox-single-column-3a.html       |  81 ++++++++
 .../pagination/flexbox-single-column-3b.html       |  81 ++++++++
 .../pagination/flexbox-single-column-4-ref.html    |  41 ++++
 .../pagination/flexbox-single-column-4.html        |  46 +++++
 .../pagination/flexbox-single-column-5-ref.html    |  46 +++++
 .../pagination/flexbox-single-column-5.html        |  51 +++++
 .../pagination/flexbox-single-column-6-ref.html    |  76 ++++++++
 .../pagination/flexbox-single-column-6.html        |  81 ++++++++
 .../flexbox-single-column-vertical-lr-1-ref.html   |  99 ++++++++++
 .../flexbox-single-column-vertical-lr-1a.html      | 101 ++++++++++
 .../flexbox-single-column-vertical-lr-1b.html      | 101 ++++++++++
 .../flexbox-single-column-vertical-lr-1c.html      | 102 ++++++++++
 .../flexbox-single-column-vertical-lr-1d.html      | 106 ++++++++++
 .../flexbox-single-column-vertical-lr-1e.html      | 114 +++++++++++
 .../flexbox-single-column-vertical-lr-1f.html      | 114 +++++++++++
 .../flexbox-single-column-vertical-lr-1g.html      | 115 +++++++++++
 .../flexbox-single-column-vertical-lr-1h.html      | 115 +++++++++++
 .../flexbox-single-column-vertical-lr-1i.html      | 115 +++++++++++
 .../flexbox-single-column-vertical-lr-1j.html      | 115 +++++++++++
 .../flexbox-single-column-vertical-lr-2-ref.html   | 100 ++++++++++
 .../flexbox-single-column-vertical-lr-2.html       | 106 ++++++++++
 .../flexbox-single-column-vertical-lr-3-ref.html   |  81 ++++++++
 .../flexbox-single-column-vertical-lr-3a.html      |  84 ++++++++
 .../flexbox-single-column-vertical-lr-3b.html      |  84 ++++++++
 .../flexbox-single-column-vertical-lr-4-ref.html   |  44 +++++
 .../flexbox-single-column-vertical-lr-4.html       |  49 +++++
 .../flexbox-single-column-vertical-lr-5-ref.html   |  49 +++++
 .../flexbox-single-column-vertical-lr-5.html       |  54 ++++++
 .../flexbox-single-column-vertical-lr-6-ref.html   |  79 ++++++++
 .../flexbox-single-column-vertical-lr-6.html       |  84 ++++++++
 .../flexbox-single-column-vertical-rl-1-ref.html   |  99 ++++++++++
 .../flexbox-single-column-vertical-rl-1a.html      | 101 ++++++++++
 .../flexbox-single-column-vertical-rl-1b.html      | 101 ++++++++++
 .../flexbox-single-column-vertical-rl-1c.html      | 102 ++++++++++
 .../flexbox-single-column-vertical-rl-1d.html      | 106 ++++++++++
 .../flexbox-single-column-vertical-rl-1e.html      | 114 +++++++++++
 .../flexbox-single-column-vertical-rl-1f.html      | 114 +++++++++++
 .../flexbox-single-column-vertical-rl-1g.html      | 115 +++++++++++
 .../flexbox-single-column-vertical-rl-1h.html      | 115 +++++++++++
 .../flexbox-single-column-vertical-rl-1i.html      | 115 +++++++++++
 .../flexbox-single-column-vertical-rl-1j.html      | 115 +++++++++++
 .../flexbox-single-column-vertical-rl-2-ref.html   | 100 ++++++++++
 .../flexbox-single-column-vertical-rl-2.html       | 106 ++++++++++
 .../flexbox-single-column-vertical-rl-3-ref.html   |  81 ++++++++
 .../flexbox-single-column-vertical-rl-3a.html      |  84 ++++++++
 .../flexbox-single-column-vertical-rl-3b.html      |  84 ++++++++
 .../flexbox-single-column-vertical-rl-4-ref.html   |  44 +++++
 .../flexbox-single-column-vertical-rl-4.html       |  49 +++++
 .../flexbox-single-column-vertical-rl-5-ref.html   |  49 +++++
 .../flexbox-single-column-vertical-rl-5.html       |  54 ++++++
 .../flexbox-single-column-vertical-rl-6-ref.html   |  79 ++++++++
 .../flexbox-single-column-vertical-rl-6.html       |  84 ++++++++
 .../pagination/flexbox-single-row-1-ref.html       | 111 +++++++++++
 .../flexbox/pagination/flexbox-single-row-1a.html  |  98 ++++++++++
 .../flexbox/pagination/flexbox-single-row-1b.html  |  98 ++++++++++
 .../flexbox/pagination/flexbox-single-row-1c.html  | 111 +++++++++++
 .../flexbox/pagination/flexbox-single-row-1d.html  | 111 +++++++++++
 .../flexbox/pagination/flexbox-single-row-1e.html  | 112 +++++++++++
 .../flexbox/pagination/flexbox-single-row-1f.html  | 112 +++++++++++
 .../flexbox/pagination/flexbox-single-row-1g.html  | 112 +++++++++++
 .../flexbox/pagination/flexbox-single-row-1h.html  | 112 +++++++++++
 .../pagination/flexbox-single-row-2-ref.html       | 111 +++++++++++
 .../flexbox/pagination/flexbox-single-row-2.html   | 100 ++++++++++
 .../pagination/flexbox-single-row-3-ref.html       |  92 +++++++++
 .../flexbox/pagination/flexbox-single-row-3a.html  |  81 ++++++++
 .../flexbox/pagination/flexbox-single-row-3b.html  |  81 ++++++++
 .../pagination/flexbox-single-row-4-ref.html       |  46 +++++
 .../flexbox/pagination/flexbox-single-row-4.html   |  51 +++++
 .../flexbox-single-row-vertical-lr-1-ref.html      | 114 +++++++++++
 .../flexbox-single-row-vertical-lr-1a.html         | 101 ++++++++++
 .../flexbox-single-row-vertical-lr-1b.html         | 101 ++++++++++
 .../flexbox-single-row-vertical-lr-1c.html         | 114 +++++++++++
 .../flexbox-single-row-vertical-lr-1d.html         | 114 +++++++++++
 .../flexbox-single-row-vertical-lr-1e.html         | 115 +++++++++++
 .../flexbox-single-row-vertical-lr-1f.html         | 115 +++++++++++
 .../flexbox-single-row-vertical-lr-1g.html         | 115 +++++++++++
 .../flexbox-single-row-vertical-lr-1h.html         | 115 +++++++++++
 .../flexbox-single-row-vertical-lr-2-ref.html      | 114 +++++++++++
 .../flexbox-single-row-vertical-lr-2.html          | 103 ++++++++++
 .../flexbox-single-row-vertical-lr-3-ref.html      |  95 +++++++++
 .../flexbox-single-row-vertical-lr-3a.html         |  84 ++++++++
 .../flexbox-single-row-vertical-lr-3b.html         |  84 ++++++++
 .../flexbox-single-row-vertical-lr-4-ref.html      |  49 +++++
 .../flexbox-single-row-vertical-lr-4.html          |  54 ++++++
 .../flexbox-single-row-vertical-rl-1-ref.html      | 114 +++++++++++
 .../flexbox-single-row-vertical-rl-1a.html         | 101 ++++++++++
 .../flexbox-single-row-vertical-rl-1b.html         | 101 ++++++++++
 .../flexbox-single-row-vertical-rl-1c.html         | 114 +++++++++++
 .../flexbox-single-row-vertical-rl-1d.html         | 114 +++++++++++
 .../flexbox-single-row-vertical-rl-1e.html         | 115 +++++++++++
 .../flexbox-single-row-vertical-rl-1f.html         | 115 +++++++++++
 .../flexbox-single-row-vertical-rl-1g.html         | 115 +++++++++++
 .../flexbox-single-row-vertical-rl-1h.html         | 115 +++++++++++
 .../flexbox-single-row-vertical-rl-2-ref.html      | 114 +++++++++++
 .../flexbox-single-row-vertical-rl-2.html          | 103 ++++++++++
 .../flexbox-single-row-vertical-rl-3-ref.html      |  95 +++++++++
 .../flexbox-single-row-vertical-rl-3a.html         |  84 ++++++++
 .../flexbox-single-row-vertical-rl-3b.html         |  84 ++++++++
 .../flexbox-single-row-vertical-rl-4-ref.html      |  49 +++++
 .../flexbox-single-row-vertical-rl-4.html          |  54 ++++++
 .../flexbox-unbreakable-child-1-ref.html           |  62 ++++++
 .../flexbox-unbreakable-child-1a-wrap.html         |  68 +++++++
 .../pagination/flexbox-unbreakable-child-1a.html   |  66 +++++++
 .../flexbox-unbreakable-child-1b-wrap.html         |  68 +++++++
 .../pagination/flexbox-unbreakable-child-1b.html   |  66 +++++++
 .../flexbox-unbreakable-child-1c-wrap.html         |  69 +++++++
 .../pagination/flexbox-unbreakable-child-1c.html   |  67 +++++++
 .../flexbox-unbreakable-child-1d-wrap.html         |  70 +++++++
 .../pagination/flexbox-unbreakable-child-1d.html   |  68 +++++++
 .../flexbox-unbreakable-child-2-ref.html           |  82 ++++++++
 .../pagination/flexbox-unbreakable-child-2.html    |  77 ++++++++
 .../flexbox-unbreakable-child-3-ref.html           |  71 +++++++
 .../flexbox-unbreakable-child-3a-wrap.html         |  69 +++++++
 .../pagination/flexbox-unbreakable-child-3a.html   |  68 +++++++
 .../flexbox-unbreakable-child-3b-wrap.html         |  69 +++++++
 .../pagination/flexbox-unbreakable-child-3b.html   |  68 +++++++
 .../flexbox-unbreakable-child-3c-wrap.html         |  70 +++++++
 .../pagination/flexbox-unbreakable-child-3c.html   |  69 +++++++
 .../flexbox-unbreakable-child-3d-wrap.html         |  71 +++++++
 .../pagination/flexbox-unbreakable-child-3d.html   |  70 +++++++
 layout/reftests/flexbox/pagination/reftest.list    | 214 +++++++++++++++++++++
 layout/reftests/flexbox/reftest.list               | 127 ++++++++++++
 layout/reftests/flexbox/solidblue.png              | Bin 0 -> 135 bytes
 362 files changed, 28568 insertions(+)
 create mode 100644 layout/reftests/flexbox/ahem.css
 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-baseline-horiz-4-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1.html
 create mode 100644 layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1.html
 create mode 100644 layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1a.html
 create mode 100644 layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1b.html
 create mode 100644 layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1a.html
 create mode 100644 layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1b.html
 create mode 100644 layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1.html
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changeContent-1-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changeContent-1.html
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changeContent-2-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changeContent-2.html
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-iframe.html
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-iframe.html
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-iframe.html
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-iframe.html
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changeOrder-1-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changeOrder-1a.html
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changeOrder-1b.html
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changePadding-1-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changePadding-1a.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-dyn-changePadding-1b.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-empty-container-synthesized-baseline-001-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001.html
 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-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-item-align-self-dynamic-pos-001-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001.html
 create mode 100644 layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002.html
 create mode 100644 layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1.html
 create mode 100644 layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1.html
 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-resizeviewport-2-helper.html
 create mode 100644 layout/reftests/flexbox/flexbox-resizeviewport-2-ref.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-resizeviewport-2.xhtml
 create mode 100644 layout/reftests/flexbox/flexbox-styling-on-svg-1-ref.svg
 create mode 100644 layout/reftests/flexbox/flexbox-styling-on-svg-1.svg
 create mode 100644 layout/reftests/flexbox/flexbox-table-flex-items-1-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-table-flex-items-1.html
 create mode 100644 layout/reftests/flexbox/flexbox-table-flex-items-2-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-table-flex-items-2.html
 create mode 100644 layout/reftests/flexbox/flexbox-table-flex-items-3-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-table-flex-items-3.html
 create mode 100644 layout/reftests/flexbox/flexbox-table-flex-items-4-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-table-flex-items-4.html
 create mode 100644 layout/reftests/flexbox/flexbox-table-flex-items-5-ref.html
 create mode 100644 layout/reftests/flexbox/flexbox-table-flex-items-5.html
 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/pagination/flexbox-empty-1-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-empty-1a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-empty-1b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-empty-1c.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-empty-1d.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-empty-1e.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-empty-1f.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-empty-1g.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-empty-1h.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-empty-2a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-empty-2b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-empty-2c.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-empty-2d.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-1-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-1a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-1b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-1c.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-1d.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-1e.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-1f.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-1g.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-1h.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-1i.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-1j.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-2-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-2.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1c.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1d.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1e.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1f.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1g.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1h.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1i.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1j.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1c.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1d.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1e.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1f.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1g.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1h.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1i.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1j.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-1-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-1a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-1b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-1c.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-1d.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-1e.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-1f.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-2-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-2a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-2b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1c.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1d.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1e.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1f.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1c.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1d.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1e.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1f.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-1-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-1a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-1b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-1c.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-1d.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-1e.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-1f.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-1g.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-1h.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-1i.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-1j.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-2-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-2.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-3-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-3a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-3b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-4-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-4.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-5-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-5.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-6-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-6.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1c.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1d.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1e.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1f.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1g.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1h.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1i.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1j.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1c.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1d.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1e.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1f.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1g.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1h.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1i.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1j.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-1-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-1a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-1b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-1c.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-1d.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-1e.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-1f.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-1g.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-1h.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-2-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-2.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-3-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-3a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-3b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-4-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-4.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1c.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1d.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1e.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1f.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1g.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1h.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1c.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1d.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1e.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1f.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1g.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1h.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3-ref.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a-wrap.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b-wrap.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c-wrap.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d-wrap.html
 create mode 100644 layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d.html
 create mode 100644 layout/reftests/flexbox/pagination/reftest.list
 create mode 100644 layout/reftests/flexbox/reftest.list
 create mode 100644 layout/reftests/flexbox/solidblue.png

(limited to 'layout/reftests/flexbox')

diff --git a/layout/reftests/flexbox/ahem.css b/layout/reftests/flexbox/ahem.css
new file mode 100644
index 0000000000..884a41198b
--- /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-2-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2-ref.xhtml
new file mode 100644
index 0000000000..26033bf78f
--- /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 0000000000..853f2c6ed0
--- /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: flex;
+        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;
+        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 0000000000..b138561977
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3-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 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, .flexbox > label { display: inline-block; }
+      table { display: inline-table; }
+
+      .lime   { background: lime;   }
+      .pink   { background: pink;   }
+      .aqua   { background: aqua;   }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="lime">text</div
+      ><button>btn</button
+      ><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 0000000000..94a9a1c9ed
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-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 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: flex;
+        align-items: baseline;
+        border: 1px dashed blue;
+        font: 14px sans-serif;
+      }
+
+      .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>
+      <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-baseline-horiz-4-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4-ref.xhtml
new file mode 100644
index 0000000000..867fa4cfc8
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4-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 the 'baseline' value for align-items and
+     align-self.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        display: block;
+        border: 1px dashed blue;
+        font: 14px sans-serif;
+      }
+
+      div   { display: inline-block; }
+      table {
+        display: inline-table;
+        margin: 1px; /* to fix fuzziness from text overlapping table border */
+      }
+
+      .lime { background: lime; }
+      .pink { background: pink; }
+      .aqua { background: aqua; }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="lime">text</div
+      ><table class="pink" border="1">
+        <tr><td>tr1</td></tr>
+        <tr><td>tr2</td></tr>
+      </table>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4.xhtml
new file mode 100644
index 0000000000..266134a030
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4.xhtml
@@ -0,0 +1,37 @@
+<?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 a <table>.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      div.flexbox {
+        display: flex;
+        align-items: baseline;
+        border: 1px dashed blue;
+        font: 14px sans-serif;
+      }
+
+      table {
+        margin: 1px; /* to fix fuzziness from text overlapping table border */
+      }
+
+      .lime { background: lime; }
+      .pink { background: pink; }
+      .aqua { background: aqua; }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="lime">text</div>
+      <table class="pink" border="1">
+        <tr><td>tr1</td></tr>
+        <tr><td>tr2</td></tr>
+      </table>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1-ref.html b/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1-ref.html
new file mode 100644
index 0000000000..14359e5949
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      width: 100px;
+      height: 20px;
+      border: 5px solid black;
+    }
+    .container > * {
+      height: 18px;
+      float: left;
+    }
+    .itemA {
+      width: 38px;
+      background: purple;
+      border: 1px solid indigo;
+    }
+    .itemB {
+      width: 58px;
+      background: teal;
+      border: 1px solid lightblue;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="itemA"></div>
+    <div class="itemB"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1.html b/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1.html
new file mode 100644
index 0000000000..951cf918d6
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing a horizontal flex container with box-sizing:border-box</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      width: 110px;
+      height: 30px;
+      border: 5px solid black;
+      box-sizing: border-box;
+    }
+    .itemA {
+      flex: 1 28px;
+      background: purple;
+      border: 1px solid indigo;
+    }
+    .itemB {
+      flex: 1 48px;
+      background: teal;
+      border: 1px solid lightblue;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="itemA"></div>
+    <div class="itemB"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1-ref.html b/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1-ref.html
new file mode 100644
index 0000000000..f02e22d957
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      width: 20px;
+      height: 100px;
+      border: 5px solid black;
+    }
+    .container > * {
+      width: 18px;
+    }
+    .itemA {
+      height: 38px;
+      background: purple;
+      border: 1px solid indigo;
+    }
+    .itemB {
+      height: 58px;
+      background: teal;
+      border: 1px solid lightblue;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="itemA"></div>
+    <div class="itemB"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1.html b/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1.html
new file mode 100644
index 0000000000..2351369b39
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing a horizontal flex container with box-sizing:border-box</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-direction: column;
+      width: 30px;
+      height: 110px;
+      border: 5px solid black;
+      box-sizing: border-box;
+    }
+    .itemA {
+      flex: 1 28px;
+      background: purple;
+      border: 1px solid indigo;
+    }
+    .itemB {
+      flex: 1 48px;
+      background: teal;
+      border: 1px solid lightblue;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="itemA"></div>
+    <div class="itemB"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1-ref.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1-ref.html
new file mode 100644
index 0000000000..e4126b17c4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1-ref.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      width: 100px;
+      height: 30px;
+      border: 1px solid black;
+      float: left;
+      margin: 2px;
+    }
+    .container > * {
+      float: left; /* emulate the testcase's horizontal lineup of flex items */
+    }
+    .itemA {
+      width: 22px;
+      height: 22px;
+      background: purple;
+      border: 4px solid indigo;
+    }
+    .itemB {
+      width: 40px;
+      height: 20px;
+      background: teal;
+      border: 5px solid lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW -->
+  <!-- 1 inflexible item -->
+  <div class="container">
+    <div class="itemA"></div>
+  </div>
+  <!-- 1 flexible item -->
+  <div class="container">
+    <div class="itemA" style="width: 92px"></div>
+  </div>
+
+  <div style="clear: both"></div>
+
+  <!-- SECOND ROW -->
+  <!-- 2 inflexible items -->
+  <div class="container">
+    <div class="itemA"></div>
+    <div class="itemB"></div>
+  </div>
+  <!-- 2 flexible items -->
+  <div class="container">
+    <div class="itemA" style="width: 32px"></div>
+    <div class="itemB" style="width: 50px"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1a.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1a.html
new file mode 100644
index 0000000000..a74f4a81cf
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1a.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing a horizontal flex container with box-sizing:border-box on its flex items</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      width: 100px;
+      height: 30px;
+      border: 1px solid black;
+      float: left;
+      margin: 2px;
+    }
+    .container > * {
+      box-sizing: border-box;
+    }
+    .itemA {
+      width: 30px;
+      background: purple;
+      border: 4px solid indigo;
+    }
+    .itemB {
+      width: 50px;
+      background: teal;
+      border: 5px solid lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW -->
+  <!-- 1 inflexible item -->
+  <div class="container">
+    <div class="itemA"></div>
+  </div>
+  <!-- 1 flexible item -->
+  <div class="container">
+    <div class="itemA" style="flex-grow: 1"></div>
+  </div>
+
+  <div style="clear: both"></div>
+
+  <!-- SECOND ROW -->
+  <!-- 2 inflexible items -->
+  <div class="container">
+    <div class="itemA"></div>
+    <div class="itemB"></div>
+  </div>
+  <!-- 2 flexible items -->
+  <div class="container">
+    <div class="itemA" style="flex-grow: 1"></div>
+    <div class="itemB" style="flex-grow: 1"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1b.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1b.html
new file mode 100644
index 0000000000..789dd14be0
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1b.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing a horizontal flex container with box-sizing:border-box on its flex items</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      width: 100px;
+      height: 30px;
+      border: 1px solid black;
+      float: left;
+      margin: 2px;
+    }
+    .container > * {
+      box-sizing: border-box;
+    }
+    .itemA {
+      flex-basis: 30px;
+      background: purple;
+      border: 4px solid indigo;
+    }
+    .itemB {
+      flex-basis: 50px;
+      background: teal;
+      border: 5px solid lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW -->
+  <!-- 1 inflexible item -->
+  <div class="container">
+    <div class="itemA"></div>
+  </div>
+  <!-- 1 flexible item -->
+  <div class="container">
+    <div class="itemA" style="flex-grow: 1"></div>
+  </div>
+
+  <div style="clear: both"></div>
+
+  <!-- SECOND ROW -->
+  <!-- 2 inflexible items -->
+  <div class="container">
+    <div class="itemA"></div>
+    <div class="itemB"></div>
+  </div>
+  <!-- 2 flexible items -->
+  <div class="container">
+    <div class="itemA" style="flex-grow: 1"></div>
+    <div class="itemB" style="flex-grow: 1"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1-ref.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1-ref.html
new file mode 100644
index 0000000000..5d1f50af25
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1-ref.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      width: 30px;
+      height: 100px;
+      border: 1px solid black;
+      float: left;
+      margin: 2px;
+    }
+    .itemA {
+      width: 22px;
+      height: 22px;
+      background: purple;
+      border: 4px solid indigo;
+    }
+    .itemB {
+      width: 20px;
+      height: 40px;
+      background: teal;
+      border: 5px solid lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW -->
+  <!-- 1 inflexible item -->
+  <div class="container">
+    <div class="itemA"></div>
+  </div>
+  <!-- 1 flexible item -->
+  <div class="container">
+    <div class="itemA" style="height: 92px"></div>
+  </div>
+
+  <div style="clear: both"></div>
+
+  <!-- SECOND ROW -->
+  <!-- 2 inflexible items -->
+  <div class="container">
+    <div class="itemA"></div>
+    <div class="itemB"></div>
+  </div>
+  <!-- 2 flexible items -->
+  <div class="container">
+    <div class="itemA" style="height: 32px"></div>
+    <div class="itemB" style="height: 50px"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1a.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1a.html
new file mode 100644
index 0000000000..e87e93372a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1a.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing a vertical flex container with box-sizing:border-box on its flex items</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-direction: column;
+      width: 30px;
+      height: 100px;
+      border: 1px solid black;
+      float: left;
+      margin: 2px;
+    }
+    .container > * {
+      box-sizing: border-box;
+    }
+    .itemA {
+      height: 30px;
+      background: purple;
+      border: 4px solid indigo;
+    }
+    .itemB {
+      height: 50px;
+      background: teal;
+      border: 5px solid lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW -->
+  <!-- 1 inflexible item -->
+  <div class="container">
+    <div class="itemA"></div>
+  </div>
+  <!-- 1 flexible item -->
+  <div class="container">
+    <div class="itemA" style="flex-grow: 1"></div>
+  </div>
+
+  <div style="clear: both"></div>
+
+  <!-- SECOND ROW -->
+  <!-- 2 inflexible items -->
+  <div class="container">
+    <div class="itemA"></div>
+    <div class="itemB"></div>
+  </div>
+  <!-- 2 flexible items -->
+  <div class="container">
+    <div class="itemA" style="flex-grow: 1"></div>
+    <div class="itemB" style="flex-grow: 1"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1b.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1b.html
new file mode 100644
index 0000000000..7edbf83786
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1b.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing a vertical flex container with box-sizing:border-box on its flex items</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-direction: column;
+      width: 30px;
+      height: 100px;
+      border: 1px solid black;
+      float: left;
+      margin: 2px;
+    }
+    .container > * {
+      box-sizing: border-box;
+    }
+    .itemA {
+      flex-basis: 30px;
+      background: purple;
+      border: 4px solid indigo;
+    }
+    .itemB {
+      flex-basis: 50px;
+      background: teal;
+      border: 5px solid lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW -->
+  <!-- 1 inflexible item -->
+  <div class="container">
+    <div class="itemA"></div>
+  </div>
+  <!-- 1 flexible item -->
+  <div class="container">
+    <div class="itemA" style="flex-grow: 1"></div>
+  </div>
+
+  <div style="clear: both"></div>
+
+  <!-- SECOND ROW -->
+  <!-- 2 inflexible items -->
+  <div class="container">
+    <div class="itemA"></div>
+    <div class="itemB"></div>
+  </div>
+  <!-- 2 flexible items -->
+  <div class="container">
+    <div class="itemA" style="flex-grow: 1"></div>
+    <div class="itemB" style="flex-grow: 1"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1-ref.html b/layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1-ref.html
new file mode 100644
index 0000000000..685e8a056c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference Case</title>
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      height: 100px;
+      border: 1px solid black;
+    }
+    .min-content-height {
+      background: pink;
+      align-self: start;
+    }
+    .max-content-height {
+      background: lightblue;
+      align-self: start;
+    }
+    .auto-height {
+      background: orange;
+      height: auto;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="min-content-height">min</div>
+    <div class="max-content-height">max</div>
+    <div class="auto-height">auto</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1.html b/layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1.html
new file mode 100644
index 0000000000..d30efed851
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>Testing that the (default) 'align-items:stretch' only stretches flex items with height:auto (not height:[other-keyword])</title>
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      height: 100px;
+      border: 1px solid black;
+    }
+    .min-content-height {
+      background: pink;
+      height: -moz-min-content;
+      height: min-content;
+    }
+    .max-content-height {
+      background: lightblue;
+      height: -moz-max-content;
+      height: max-content;
+    }
+    .auto-height {
+      background: orange;
+      height: auto;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="min-content-height">min</div>
+    <div class="max-content-height">max</div>
+    <div class="auto-height">auto</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeContent-1-ref.html b/layout/reftests/flexbox/flexbox-dyn-changeContent-1-ref.html
new file mode 100644
index 0000000000..164c24806b
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeContent-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    #flex {
+      display: inline-flex;
+      border: 1px solid black;
+    }
+    #itemA {
+      background: purple;
+      width: 50%;
+      flex: none;
+    }
+    #itemB {
+      background: lightblue;
+      flex: none;
+    }
+  </style>
+</head>
+<body>
+  <div id="flex">
+    <div id="itemA"></div>
+    <div id="itemB">BBBBB</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeContent-1.html b/layout/reftests/flexbox/flexbox-dyn-changeContent-1.html
new file mode 100644
index 0000000000..4a923397b9
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeContent-1.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <meta charset="UTF-8">
+  <!-- This testcase ensures that we correctly re-evaluate the percent width on
+       the purple flex item "itemA", in response to the width of its flex
+       container changing due to the other item gaining some more content. -->
+  <style>
+    #flex {
+      display: inline-flex;
+      border: 1px solid black;
+    }
+    #itemA {
+      background: purple;
+      width: 50%;
+      flex: none;
+    }
+    #itemB {
+      background: lightblue;
+      flex: none;
+    }
+  </style>
+  <script>
+    function tweak() {
+      document.getElementById("itemB").innerText = "BBBBB";
+      document.documentElement.removeAttribute("class");
+    }
+    window.addEventListener("MozReftestInvalidate", tweak, false);
+  </script>
+</head>
+<body>
+  <div id="flex">
+    <div id="itemA"></div>
+    <div id="itemB">BB</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeContent-2-ref.html b/layout/reftests/flexbox/flexbox-dyn-changeContent-2-ref.html
new file mode 100644
index 0000000000..4889b54944
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeContent-2-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    #flex {
+      display: inline-flex;
+      flex-direction: column;
+      border: 1px solid black;
+      max-width: 50px;
+      height: 150px;
+    }
+    #itemA {
+      background: purple;
+      height: 50%;
+      flex: none;
+    }
+    #itemB {
+      background: lightblue;
+      flex: none;
+    }
+  </style>
+</head>
+<body>
+  <div id="flex">
+    <div id="itemA">A</div>
+    <div id="itemB">BB</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeContent-2.html b/layout/reftests/flexbox/flexbox-dyn-changeContent-2.html
new file mode 100644
index 0000000000..19288997d4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeContent-2.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <meta charset="UTF-8">
+  <!-- This testcase ensures that we correctly re-evaluate the percent height
+       on the purple flex item "itemA", in response to the height of its flex
+       container being dynamically changed. -->
+  <style>
+    #flex {
+      display: inline-flex;
+      flex-direction: column;
+      border: 1px solid black;
+      max-width: 50px;
+      height: 60px;
+    }
+    #itemA {
+      background: purple;
+      height: 50%;
+      flex: none;
+    }
+    #itemB {
+      background: lightblue;
+      flex: none;
+    }
+  </style>
+  <script>
+    function tweak() {
+      document.getElementById("flex").style.height = "150px";
+      document.documentElement.removeAttribute("class");
+    }
+    window.addEventListener("MozReftestInvalidate", tweak, false);
+  </script>
+</head>
+<body>
+  <div id="flex">
+    <div id="itemA">A</div>
+    <div id="itemB">BB</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-iframe.html b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-iframe.html
new file mode 100644
index 0000000000..3801464ee2
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-iframe.html
@@ -0,0 +1,24 @@
+<html>
+  <head>
+    <style>
+      body {
+        margin: 0;
+      }
+      .outerContainer {
+        display: flex;
+        height: 100px;
+        background-color: red;
+      }
+      .innerContainer {
+        display: flex;
+        flex: 1;
+        background-color: lime;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outerContainer">
+      <div class="innerContainer"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-ref.xhtml
new file mode 100644
index 0000000000..889ac83ce4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-ref.xhtml
@@ -0,0 +1,19 @@
+<?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>
+      #container {
+        width: 100px;
+        height: 100px;
+        background: lime;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container"></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1.xhtml
new file mode 100644
index 0000000000..889b479c04
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1.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 we reflow nested flex containers sufficiently when
+    the window (or the iframe we're inside of) is horizontally resized.
+
+    This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <style>
+      #frame {
+        width: 400px;
+        height: 200px;
+        border: 0;
+      }
+    </style>
+    <script>
+      function tweak() {
+        document.getElementById("frame").style.width = "100px";
+        document.documentElement.removeAttribute("class");
+      }
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+  </head>
+  <body>
+    <iframe id="frame" src="flexbox-dyn-changeFrameWidth-1-iframe.html"></iframe>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-iframe.html b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-iframe.html
new file mode 100644
index 0000000000..41a4a4c802
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-iframe.html
@@ -0,0 +1,27 @@
+<html>
+  <head>
+    <style>
+      body {
+        margin: 0;
+      }
+      #container {
+        display: flex;
+        flex-direction: column;
+        border: 10px solid lime;
+        width: 80px;
+        height: 80px;
+        background-color: red;
+      }
+      #item {
+        background-color: lime;
+        width: 80px;
+        height: 80px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="item"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-ref.xhtml
new file mode 100644
index 0000000000..889ac83ce4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-ref.xhtml
@@ -0,0 +1,19 @@
+<?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>
+      #container {
+        width: 100px;
+        height: 100px;
+        background: lime;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container"></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2.xhtml
new file mode 100644
index 0000000000..fdb0590959
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2.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/
+-->
+<!--
+    This test checks that we don't end up with the effects of an intermediate
+    "measuring" reflow left over, when we resize a window that contains a
+    vertical flex container with a fixed-height flex item.
+
+    This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <style>
+      #frame {
+        width: 400px;
+        height: 200px;
+        border: 0;
+      }
+    </style>
+    <script>
+      function tweak() {
+        document.getElementById("frame").style.width = "100px";
+        document.documentElement.removeAttribute("class");
+      }
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+  </head>
+  <body>
+    <iframe id="frame" src="flexbox-dyn-changeFrameWidth-2-iframe.html"></iframe>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-iframe.html b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-iframe.html
new file mode 100644
index 0000000000..b3e7dc27c8
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-iframe.html
@@ -0,0 +1,29 @@
+<html>
+  <head>
+    <style>
+      body {
+        margin: 0;
+      }
+      #container {
+        display: flex;
+        flex-direction: column;
+        border: 10px solid lime;
+        width: 80px;
+        height: 80px;
+        background-color: red;
+      }
+      #item {
+        background-color: lime;
+        min-height: 0;
+        width: 80px;
+        height: auto;
+        line-height: 80px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="item">&nbsp;</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-ref.xhtml
new file mode 100644
index 0000000000..889ac83ce4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-ref.xhtml
@@ -0,0 +1,19 @@
+<?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>
+      #container {
+        width: 100px;
+        height: 100px;
+        background: lime;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container"></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3.xhtml
new file mode 100644
index 0000000000..c412469025
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3.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/
+-->
+<!--
+    This test checks that we don't end up with the effects of an intermediate
+    "measuring" reflow left over, when we resize a window that contains a
+    vertical flex container with an auto-height flex item.
+
+    This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <style>
+      #frame {
+        width: 400px;
+        height: 200px;
+        border: 0;
+      }
+    </style>
+    <script>
+      function tweak() {
+        document.getElementById("frame").style.width = "100px";
+        document.documentElement.removeAttribute("class");
+      }
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+  </head>
+  <body>
+    <iframe id="frame" src="flexbox-dyn-changeFrameWidth-3-iframe.html"></iframe>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-iframe.html b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-iframe.html
new file mode 100644
index 0000000000..72cb0af38b
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-iframe.html
@@ -0,0 +1,20 @@
+<html>
+  <head>
+    <style>
+      body {
+        margin: 0;
+      }
+      .container {
+        display: flex;
+        background-color: lime;
+        top: 0;
+        bottom: 0;
+        position: absolute;
+        width: 100px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container"></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-ref.xhtml
new file mode 100644
index 0000000000..889ac83ce4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-ref.xhtml
@@ -0,0 +1,19 @@
+<?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>
+      #container {
+        width: 100px;
+        height: 100px;
+        background: lime;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container"></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4.xhtml
new file mode 100644
index 0000000000..80a7a1cd5f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4.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/
+-->
+<!--
+    This test checks that we sufficiently reflow abspos flex containers that
+    have top:0;bottom:0 (which ends up effectively being like height:100%)
+    the window (or the iframe we're inside of) is vertically resized.
+
+    This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <style>
+      #frame {
+        width: 100px;
+        height: 50px;
+        border: 0;
+      }
+    </style>
+    <script>
+      function tweak() {
+        document.getElementById("frame").style.height = "100px";
+        document.documentElement.removeAttribute("class");
+      }
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+  </head>
+  <body>
+    <iframe id="frame" src="flexbox-dyn-changeFrameWidth-4-iframe.html"></iframe>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeOrder-1-ref.html b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1-ref.html
new file mode 100644
index 0000000000..fb43b103d9
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<style>
+#limesquare {
+  width: 100px;
+  height: 100px;
+  background: lime;
+}
+</style>
+</head>
+<body>
+  <div id="limesquare"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeOrder-1a.html b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1a.html
new file mode 100644
index 0000000000..0feed67be4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1a.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+    This test checks that we repaint, when a flex item is brought towards
+    the viewer in the stacking-order, without moving in the "x" or "y"
+    dimensions onscreen, using the "order" and "margin-left" properties.
+
+    This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html class="reftest-wait">
+<head>
+<style>
+#container {
+  display: flex;
+}
+
+#container > * {
+  width: 100px;
+  height: 100px;
+}
+
+#a {
+  background-color: red;
+}
+
+#b {
+  background-color: lime;
+}
+
+.foreground {
+  order: 1;
+  margin-left: -100px;
+}
+</style>
+<script>
+  function tweak() {
+    var a = document.getElementById("a");
+    var b = document.getElementById("b");
+    a.classList.remove("foreground");
+    b.classList.add("foreground");
+    document.documentElement.removeAttribute("class");
+  }
+
+  window.addEventListener("MozReftestInvalidate", tweak);
+</script>
+</head>
+<body>
+  <div id="container">
+    <div id="a" class="foreground"></div>
+    <div id="b"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeOrder-1b.html b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1b.html
new file mode 100644
index 0000000000..5e53f3b447
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1b.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+    This test checks that we repaint, when a flex item is brought towards
+    the viewer in the stacking-order, without moving in the "x" or "y"
+    dimensions onscreen, using the "order" and "left" properties.
+
+    This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html class="reftest-wait">
+<head>
+<style>
+#container {
+  display: flex;
+}
+
+#container > * {
+  width: 100px;
+  height: 100px;
+  position: relative;
+}
+
+#a {
+  background-color: red;
+}
+
+#b {
+  background-color: lime;
+}
+
+.foreground {
+  order: 1;
+  left: -100px;
+}
+</style>
+<script>
+  function tweak() {
+    var a = document.getElementById("a");
+    var b = document.getElementById("b");
+    a.classList.remove("foreground");
+    b.classList.add("foreground");
+    document.documentElement.removeAttribute("class");
+  }
+
+  window.addEventListener("MozReftestInvalidate", tweak);
+</script>
+</head>
+<body>
+  <div id="container">
+    <div id="a" class="foreground"></div>
+    <div id="b"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changePadding-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changePadding-1-ref.xhtml
new file mode 100644
index 0000000000..681a3cb4cc
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changePadding-1-ref.xhtml
@@ -0,0 +1,20 @@
+<?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>
+      #container {
+        display: flex;
+        width: 100px;
+        height: 100px;
+        background: lime;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container"></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changePadding-1a.xhtml b/layout/reftests/flexbox/flexbox-dyn-changePadding-1a.xhtml
new file mode 100644
index 0000000000..600ab0fafa
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changePadding-1a.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 checks that we reflow sufficiently when a grandchild of a
+    flex container needs an incremental reflow.  This test should end up
+    rendering as a lime square, 100px by 100px.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <style>
+      #container {
+        display: flex;
+        flex-direction: column;
+        width: 100px;
+      }
+      #item {
+        background: red;
+      }
+      #tweakMe {
+        height: 100px;
+        background: orange;
+        padding-left: 1px;
+      }
+    </style>
+    <script>
+      function tweak() {
+        var tweakMe = document.getElementById("tweakMe");
+        tweakMe.style.paddingLeft = "0";
+        tweakMe.style.background = "lime";
+        document.documentElement.removeAttribute("class");
+      }
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+  </head>
+  <body>
+    <div id="container">
+      <div id="item">
+        <div id="tweakMe"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changePadding-1b.xhtml b/layout/reftests/flexbox/flexbox-dyn-changePadding-1b.xhtml
new file mode 100644
index 0000000000..32390e6a27
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changePadding-1b.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 checks that we reflow sufficiently when a stretched, nested
+    flex container needs an incremental reflow.  This test should end up
+    rendering as a lime square, 100px by 100px.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+  <head>
+    <style>
+      #outerContainer {
+        display: flex;
+        width: 100px;
+        height: 100px;
+        background: red;
+      }
+      #tweakMe {
+        display: flex;
+        background: orange;
+        width: 100px;
+        /* height should stretch to fill parent's height, via
+         * parent's "align-items: stretch" (the default) */
+
+        padding-left: 1px;
+      }
+    </style>
+    <script>
+      function tweak() {
+        var tweakMe = document.getElementById("tweakMe");
+        tweakMe.style.paddingLeft = "0";
+        tweakMe.style.background = "lime";
+        document.documentElement.removeAttribute("class");
+      }
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+  </head>
+  <body>
+    <div id="outerContainer">
+      <div id="tweakMe"></div>
+    </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 0000000000..13e0880c09
--- /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: flex;
+        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 0000000000..e271f4fb3e
--- /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: flex;
+        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 0000000000..db3860fcef
--- /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: flex;
+        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 0000000000..b083ccd5f9
--- /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: flex;
+        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 0000000000..b29b16f186
--- /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: flex;
+        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 0000000000..faf54917de
--- /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: flex;
+        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 0000000000..785063fdf7
--- /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: flex;
+        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 0000000000..9c82796620
--- /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: flex;
+        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 0000000000..9f60c43160
--- /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: flex;
+        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 0000000000..536a9fa83e
--- /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: flex;
+        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 0000000000..37f63136a7
--- /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: flex;
+        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 0000000000..7e3468b1f3
--- /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: flex;
+        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 0000000000..b907af8b57
--- /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: flex;
+        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 0000000000..45d357ab87
--- /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: flex;
+        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 0000000000..eca09eb851
--- /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: flex;
+        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 0000000000..0c0f9b5baa
--- /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: flex;
+        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 0000000000..9bcd133529
--- /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: flex;
+        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 0000000000..78810b1ce6
--- /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: max-content"/>
+    <div class="flexbox" style="width: 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: max-content"/>
+    <div class="flexbox withPadding" style="width: 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 0000000000..b0b578b165
--- /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: 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: max-content"/>
+    <div class="flexbox" style="width: 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: max-content"/>
+    <div class="flexbox withPadding" style="width: 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 0000000000..c64f236d43
--- /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: 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: max-content"> </div>
+    <div class="flexbox" style="width: 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: max-content"> </div>
+    <div class="flexbox withPadding" style="width: 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-empty-container-synthesized-baseline-001-ref.html b/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001-ref.html
new file mode 100644
index 0000000000..8a302da771
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Synthesized flex container baseline.</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1313811">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+.ib {
+  display: inline-block;
+}
+.ig {
+  display: inline-grid;
+}
+.ib, .ig {
+  border-style: solid;
+  border-width: 3px 1px 5px 1px;
+  padding: 7px 10px 3px 8px;
+  margin: 5px 3px 2px 1px;
+}
+</style>
+
+</head><body>
+
+<pre>Inline-level context:</pre>
+Flexbox:<div class="ib"></div>
+Block:<div class="ig"></div>
+
+<pre>Grid-level context:</pre>
+<div style="display:inline-grid; grid-auto-flow:column; align-items:baseline; justify-items:start">
+Flexbox:<div class="ib"></div>
+Block:<div class="ig"></div>
+</div>
+
+<pre>Flexbox-level context:</pre>
+<div style="display:inline-flex; align-items:baseline; justify-items:start">
+Flexbox:<div class="ib" style="margin-bottom:0"></div>
+Block:<div class="ig"></div>
+</div>
+
+</body></html>
diff --git a/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001.html b/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001.html
new file mode 100644
index 0000000000..5f58b18ecc
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Synthesized flex container baseline.</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1313811">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-baselines">
+  <link rel="match" href="flexbox-empty-container-synthesized-baseline-001.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+.ib {
+  display: inline-block;
+}
+.if {
+  display: inline-flex;
+}
+.ib, .if {
+  border-style: solid;
+  border-width: 3px 1px 5px 1px;
+  padding: 7px 10px 3px 8px;
+  margin: 5px 3px 2px 1px;
+}
+</style>
+
+</head><body>
+
+<pre>Inline-level context:</pre>
+Flexbox:<div class="if"></div>
+Block:<div class="ib"></div>
+
+<pre>Grid-level context:</pre>
+<div style="display:inline-grid; grid-auto-flow:column; align-items:baseline; justify-items:start">
+Flexbox:<div class="if"></div>
+Block:<div class="ib" style="margin-bottom:0"></div>
+</div>
+
+<pre>Flexbox-level context:</pre>
+<div style="display:inline-flex; align-items:baseline; justify-items:start">
+Flexbox:<div class="if"></div>
+Block:<div class="ib" style="margin-bottom:0"></div>
+</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 0000000000..1fd86bafd4
--- /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: flex;
+        width: 400px;
+        margin-bottom: 2px;
+        font-family: sans-serif;
+        background: lightgreen;
+        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 0000000000..e5c336b465
--- /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: flex;
+        width: 400px;
+        margin-bottom: 2px;
+        font-family: sans-serif;
+        background: lightgreen;
+        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 0000000000..d00b5304ee
--- /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: flex;
+        width: 400px;
+        margin-bottom: 2px;
+        font-family: sans-serif;
+        background: lightgreen;
+        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 0000000000..e906358131
--- /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: flex;
+        width: 400px;
+        margin-bottom: 2px;
+        font-family: sans-serif;
+        background: lightgreen;
+        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 0000000000..4fdc493f12
--- /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: flex;
+        width: 400px;
+        margin-bottom: 2px;
+        font-family: sans-serif;
+        background: lightgreen;
+        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 0000000000..c6270dd49b
--- /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;
+        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 0000000000..817e3fb2c4
--- /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: flex;
+        font-family: sans-serif;
+        width: 400px;
+        margin-bottom: 2px;
+        background: lightgreen;
+        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">
+      <span>aaa<span style="float: left">lll</span>bbb</span>
+    </div>
+    <div class="flexbox">
+      <span>aaa<span style="float: right">rrr</span>bbb</span>
+    </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">
+      <span>aaa<div style="float: left">lll</div>bbb</span>
+    </div>
+    <div class="flexbox">
+      <span>aaa<div style="float: right">rrr</div>bbb</span>
+    </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 0000000000..29b9355ee6
--- /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: flex;
+        font-family: sans-serif;
+        width: 400px;
+        margin-bottom: 2px;
+        background: lightgreen;
+        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 0000000000..b1008e7cc0
--- /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 0000000000..6146e50522
--- /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: flex;
+      }
+      div.a {
+        flex: 1 0 20px;
+        background: lightgreen;
+      }
+      div.b {
+        flex: 2 0 30px;
+        background: yellow;
+      }
+      div.inflex {
+        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 0000000000..933b770707
--- /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: flex;
+      }
+      div.a {
+        flex: 1 0 20px;
+        background: lightgreen;
+      }
+      div.b {
+        flex: 2 0 30px;
+        background: yellow;
+      }
+      div.inflex {
+        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 0000000000..d1469e79c9
--- /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: flex;
+      }
+      div.a {
+        flex: 1 0 20px;
+        background: lightgreen;
+      }
+      div.inflex {
+        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 0000000000..bc0b341526
--- /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: flex;
+      }
+      div.a {
+        flex: 1 0 20px;
+        background: lightgreen;
+      }
+      div.b {
+        flex: 2 0 30px;
+        background: yellow;
+      }
+      div.inflex {
+        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 0000000000..4c28d8d206
--- /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">abc def ghi jkl mno pqr stu</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 0000000000..2b88ce2ae2
--- /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 run of text 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: flex;
+        font: 10px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="flexbox">abc def ghi jkl mno pqr stu</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 0000000000..b5d509f18a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.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 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.createTextNode("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: flex;
+        font: 10px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="flexbox"> jkl mno pqr stu</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 0000000000..d532372a41
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.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 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.createTextNode("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: flex;
+        font: 10px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="flexbox">abc def ghi 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 0000000000..cbb99ba9f0
--- /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 0000000000..c7a068d572
--- /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 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;
+        justify-content: center;
+        display: 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 0000000000..9e51122cad
--- /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;
+        justify-content: space-around;
+        display: 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 0000000000..8338d1871e
--- /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.getElementsByClassName("flexbox")[0].lastChild;
+        removeMe.parentNode.removeChild(removeMe);
+        document.documentElement.removeAttribute("class");
+      }
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+    <style>
+      div.flexbox {
+        width: 200px;
+        height: 100px;
+        background: lightgreen;
+        justify-content: space-around;
+        display: flex;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">text<div>div</div>
+      REMOVE ME
+    </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 0000000000..2e228fd11a
--- /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: max-content;
+      }
+      div.minWidth {
+        width: 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 0000000000..dc1ae6f434
--- /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: flex; }
+
+      div.a { background: lightgreen; }
+      div.b { background: lightblue;  }
+
+      <!-- helper-classes for assigning pref / min / auto-width to our divs -->
+      div.prefWidth {
+        width: max-content;
+      }
+      div.minWidth {
+        width: 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 0000000000..0d0b1dd34c
--- /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: flex; }
+
+      div.a { background: lightgreen; }
+      div.b { background: lightblue;  }
+
+      <!-- helper-classes for assigning pref / min / auto-width to our divs -->
+      div.prefWidth {
+        width: max-content;
+      }
+      div.minWidth {
+        width: 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 0000000000..b71ef35d90
--- /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: 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 0000000000..40d2f68759
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2a.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 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: flex;
+        width: 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;
+      }
+      img {
+        vertical-align: top;
+      }
+  </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 0000000000..29b3a5dfb5
--- /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: flex;
+        width: 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 0000000000..a9481b0a78
--- /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: flex;
+        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 0000000000..70d8020bc1
--- /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);
+    </script>
+    <style>
+      div#flexContainer {
+        width: 100px;
+        height: 50px;
+        background: lightgray;
+        display: flex;
+        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-item-align-self-dynamic-pos-001-ref.html b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001-ref.html
new file mode 100644
index 0000000000..60b0b9955a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001-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>
+  <title>Reference: dynamic change .left on abs.pos. item w. align-self:center</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.flexbox {
+  display: flex;
+  position: relative;
+  height: 100px;
+}
+
+#item {
+  background: grey;
+  position: relative;
+  align-self: center;
+  left: 20px;
+}
+
+</style>
+</head>
+<body>
+
+<div class="flexbox">
+  <div id="item">X</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001.html b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001.html
new file mode 100644
index 0000000000..9c7b3b4087
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Flexbox Test: dynamic change .left on abs.pos. item w. align-self:center</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+  <link rel="match" href="flexbox-item-align-self-dynamic-pos-001-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.flexbox {
+  display: flex;
+  position: relative;
+  height: 100px;
+}
+
+#item {
+  background: grey;
+  position: absolute;
+  align-self: center;
+  left: 10px;
+}
+
+</style>
+</head>
+<body>
+
+<div class="flexbox">
+  <div id="item">X</div>
+</div>
+
+<script>
+  document.body.offsetLeft;
+  var items = Array.prototype.slice.call(document.querySelectorAll('#item'));
+  items.map(item =>  item.style.left = "20px");
+  document.body.offsetLeft;
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002-ref.html b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002-ref.html
new file mode 100644
index 0000000000..13b3b95021
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002-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>
+  <title>Reference: dynamic change .left on abs.pos. item w. align-self:end</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.flexbox {
+  display: flex;
+  position: relative;
+  height: 100px;
+}
+
+#item {
+  background: grey;
+  position: relative;
+  align-self: end;
+  left: 20px;
+}
+
+</style>
+</head>
+<body>
+
+<div class="flexbox">
+  <div id="item">X</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002.html b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002.html
new file mode 100644
index 0000000000..405ea1b236
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <title>CSS Flexbox Test: dynamic change .left on abs.pos. item w. align-self:end</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+  <link rel="match" href="flexbox-item-align-self-dynamic-pos-002-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.flexbox {
+  display: flex;
+  height: 100px;
+}
+
+#item {
+  background: grey;
+  position: absolute;
+  align-self: end;
+  left: 10px;
+}
+
+</style>
+</head>
+<body>
+
+<div class="flexbox">
+  <div id="item">X</div>
+</div>
+
+<script>
+  document.body.offsetLeft;
+  var items = Array.prototype.slice.call(document.querySelectorAll('#item'));
+  items.map(item =>  item.style.left = "20px");
+  document.body.offsetLeft;
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1-ref.html b/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1-ref.html
new file mode 100644
index 0000000000..eb79ba48c5
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference Case</title>
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-direction: row;
+    }
+    .container > * {
+      writing-mode: vertical-lr;
+      border: 1px solid black;
+    }
+    .itemA {
+      background: purple;
+    }
+    .itemB {
+      background: teal;
+    }
+    .itemC {
+      background: blue;
+    }
+    .itemD {
+      background: yellow;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="itemA">itemA</div>
+    <div class="itemB">itemB</div>
+    <div class="itemC">itemC</div>
+    <div class="itemD">itemD</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1.html b/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1.html
new file mode 100644
index 0000000000..ff3cef0d68
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing a horizonal flex container with keywords on min-width</title>
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-direction: row;
+    }
+    .container > * {
+      writing-mode: vertical-lr;
+      border: 1px solid black;
+      flex-basis: 0;
+    }
+    .itemA {
+      background: purple;
+      min-width: -moz-max-content;
+      min-width: max-content;
+    }
+    .itemB {
+      background: teal;
+      min-width: -moz-min-content;
+      min-width: min-content;
+    }
+    .itemC {
+      background: blue;
+      min-width: -moz-fit-content;
+      min-width: fit-content;
+    }
+    .itemD {
+      background: yellow;
+      min-width: -moz-available;
+      min-width: -webkit-fill-available;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="itemA">itemA</div>
+    <div class="itemB">itemB</div>
+    <div class="itemC">itemC</div>
+    <div class="itemD">itemD</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1-ref.html b/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1-ref.html
new file mode 100644
index 0000000000..7593db06f7
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference Case</title>
+  <meta charset="utf-8">
+  <style>
+    .container {
+      width: -moz-fit-content;
+    }
+    .container > * {
+      border: 1px solid black;
+    }
+    .itemA {
+      background: purple;
+    }
+    .itemB {
+      background: teal;
+    }
+    .itemC {
+      background: blue;
+    }
+    .itemD {
+      background: yellow;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="itemA">itemA</div>
+    <div class="itemB">itemB</div>
+    <div class="itemC">itemC</div>
+    <div class="itemD">itemD</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1.html b/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1.html
new file mode 100644
index 0000000000..5ebeb0d404
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing a vertical flex container with keywords on min-height</title>
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      width: -moz-fit-content;
+      width: fit-content;
+      flex-direction: column;
+    }
+    .container > * {
+      border: 1px solid black;
+      flex-basis: 0;
+    }
+    .itemA {
+      background: purple;
+      min-height: -moz-max-content;
+      min-height: max-content;
+    }
+    .itemB {
+      background: teal;
+      min-height: -moz-min-content;
+      min-height: min-content;
+    }
+    .itemC {
+      background: blue;
+      min-height: -moz-fit-content;
+      min-height: fit-content;
+    }
+    .itemD {
+      background: yellow;
+      min-height: -moz-available;
+      min-height: -webkit-fill-available;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="itemA">itemA</div>
+    <div class="itemB">itemB</div>
+    <div class="itemC">itemC</div>
+    <div class="itemD">itemD</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 0000000000..02a2a90cdf
--- /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: 15px"
+          /><div class="inflex" style="margin-left: 30px"
+          /><div class="inflex" style="margin-left: 30px"
+          /><div class="noFlexFn abspos"
+          /><div class="inflex" style="margin-left: 30px"/></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 0000000000..aa89dd714c
--- /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: flex;
+      }
+      div.a {
+        flex: 1 0 auto;
+        width: 30px;
+        height: 100px;
+        background: lightgreen;
+      }
+      div.b {
+        flex: 2 0 auto;
+        width: 20px;
+        height: 100px;
+        background: yellow;
+      }
+      div.inflex {
+        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="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 0000000000..00ebecc30f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-2-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;
+        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: 16px;
+        height: 16px;
+        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; left: 0"/></div>
+      <!-- Middle child abspos: -->
+      <div class="flexbox"
+           ><div class="a" style="width: 80px"
+          /><div class="inflex abspos" style="left: 0"
+          /><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: 15px"
+          /><div class="inflex" style="margin-left: 30px"
+          /><div class="inflex" style="margin-left: 30px"
+          /><div class="noFlexFn abspos" style="left: 90px"
+          /><div class="inflex" style="margin-left: 30px"/></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 0000000000..613c57cde5
--- /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: flex;
+      }
+      div.a {
+        flex: 1 0 auto;
+        width: 30px;
+        height: 100px;
+        background: lightgreen;
+      }
+      div.b {
+        flex: 2 0 auto;
+        width: 20px;
+        height: 100px;
+        background: yellow;
+      }
+      div.inflex {
+        flex: none;
+        width: 20px;
+        height: 100px;
+        background: gray;
+      }
+      div.noFlexFn {
+        width: 16px;
+        height: 16px;
+        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="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 0000000000..9bafa1506a
--- /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 0000000000..21b8730c4b
--- /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: flex;
+        position: absolute;
+        border: 1px solid black;
+      }
+      div.a {
+        flex: 1 0 30px;
+        height: 100px;
+        background: lightgreen;
+      }
+      div.b {
+        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 0000000000..4c675fa8ee
--- /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 0000000000..67974fcf67
--- /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: flex;
+        position: absolute;
+        border: 1px solid black;
+      }
+      div.a {
+        flex: 1 0 auto;
+        width:  30px;
+        height: 100px;
+        background: lightgreen;
+      }
+      div.b {
+        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 0000000000..bcd3982e45
--- /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: 15px"
+          /><div class="inflex" style="margin-left: 30px"
+          /><div class="inflex" style="margin-left: 30px"
+          /><div class="noFlexFn fixedpos"
+          /><div class="inflex" style="margin-left: 30px"/></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 0000000000..6401fb2cb1
--- /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: flex;
+      }
+      div.a {
+        flex: 1 0 auto;
+        width: 30px;
+        height: 100px;
+        background: lightgreen;
+      }
+      div.b {
+        flex: 2 0 auto;
+        width: 20px;
+        height: 100px;
+        background: yellow;
+      }
+      div.inflex {
+        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="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 0000000000..9476c8086f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-2-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: 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: 16px;
+        height: 16px;
+        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; left: 0"/></div>
+      <!-- Middle child fixedpos: -->
+      <div class="flexbox"
+           ><div class="a" style="width: 80px"
+          /><div class="inflex fixedpos" style="left: 0"
+          /><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: 15px"
+          /><div class="inflex" style="margin-left: 30px"
+          /><div class="inflex" style="margin-left: 30px"
+          /><div class="noFlexFn fixedpos" style="left: 90px"
+          /><div class="inflex" style="margin-left: 30px"/></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 0000000000..00a3c18a4f
--- /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: flex;
+      }
+      div.a {
+        flex: 1 0 auto;
+        width: 30px;
+        height: 100px;
+        background: lightgreen;
+      }
+      div.b {
+        flex: 2 0 auto;
+        width: 20px;
+        height: 100px;
+        background: yellow;
+      }
+      div.inflex {
+        flex: none;
+        width: 20px;
+        height: 100px;
+        background: gray;
+      }
+      div.noFlexFn {
+        width: 16px;
+        height: 16px;
+        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="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 0000000000..d0a086d60d
--- /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 0000000000..a67481879d
--- /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: flex;
+        position: fixed;
+        border: 1px solid black;
+      }
+      div.a {
+        flex: 1 0 30px;
+        height: 100px;
+        background: lightgreen;
+      }
+      div.b {
+        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 0000000000..8778326655
--- /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 0000000000..05c75baeeb
--- /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: flex;
+        position: fixed;
+        border: 2px dashed teal;
+      }
+      div.a {
+        flex: 1 0 auto;
+        width:  30px;
+        height: 100px;
+        background: lightgreen;
+      }
+      div.b {
+        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 0000000000..66df03b9de
--- /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: flex;
+        height: 100%;
+        border: 2px dashed black;
+      }
+      div.a {
+        flex: 1;
+        background: pink;
+      }
+      div.b {
+        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 0000000000..59ba62e64c
--- /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>
+    <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 0000000000..2875e8ee3b
--- /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-resizeviewport-2-helper.html b/layout/reftests/flexbox/flexbox-resizeviewport-2-helper.html
new file mode 100644
index 0000000000..998bcbd527
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-resizeviewport-2-helper.html
@@ -0,0 +1,32 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Helper-file for reftest flexbox-resizeviewport-2.xhtml
+     I'm intentionally using quirks-mode (no doctype), so that
+     a 100% width (block-size) will work. -->
+<html>
+  <head>
+    <style>
+      html { writing-mode: vertical-rl; }
+      div.flexbox {
+        display: flex;
+        width: 100%;
+        border: 2px dashed black;
+      }
+      div.a {
+        flex: 1;
+        background: pink;
+      }
+      div.b {
+        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-2-ref.xhtml b/layout/reftests/flexbox/flexbox-resizeviewport-2-ref.xhtml
new file mode 100644
index 0000000000..9c76a32b8d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-resizeviewport-2-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>
+    <iframe src="flexbox-resizeviewport-2-helper.html" style="width: 50px"/>
+    <iframe src="flexbox-resizeviewport-2-helper.html" style="width: 125px"/>
+    <br/>
+    <iframe src="flexbox-resizeviewport-2-helper.html" style="height: 50px"/>
+    <iframe src="flexbox-resizeviewport-2-helper.html" style="height: 125px"/>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-resizeviewport-2.xhtml b/layout/reftests/flexbox/flexbox-resizeviewport-2.xhtml
new file mode 100644
index 0000000000..5a479364bb
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-resizeviewport-2.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/
+-->
+<!-- Testcase to be sure a flex container gets reflowed properly when its
+     iframe changes size. -->
+<!-- XXXdholbert This testcase can't actually test the scenario it's intended
+     to test right now (quirks-mode percent-BSize resolution in a vertical
+     writing mode), due to Bug 1441348.
+ -->
+<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-2-helper.html"/>
+    <iframe id="b" src="flexbox-resizeviewport-2-helper.html"/>
+    <br/>
+    <iframe id="c" src="flexbox-resizeviewport-2-helper.html"/>
+    <iframe id="d" src="flexbox-resizeviewport-2-helper.html"/>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-styling-on-svg-1-ref.svg b/layout/reftests/flexbox/flexbox-styling-on-svg-1-ref.svg
new file mode 100644
index 0000000000..f2eef91e4e
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-styling-on-svg-1-ref.svg
@@ -0,0 +1,10 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="100%" height="100%">
+
+  <rect width="100%" height="100%" fill="lime"/>
+
+</svg>
diff --git a/layout/reftests/flexbox/flexbox-styling-on-svg-1.svg b/layout/reftests/flexbox/flexbox-styling-on-svg-1.svg
new file mode 100644
index 0000000000..c12e9dde55
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-styling-on-svg-1.svg
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     style="display:flex"
+     width="100%" height="100%">
+
+  <title>Test that we ignore "display:flex" on a root SVG node</title>
+
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=969460 -->
+
+  <rect width="100%" height="100%" fill="lime"/>
+
+</svg>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-1-ref.html b/layout/reftests/flexbox/flexbox-table-flex-items-1-ref.html
new file mode 100644
index 0000000000..d416d142c9
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-1-ref.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Reference: caption size test for table flex items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1334403">
+  <style type="text/css">
+* { vertical-align: top; }
+.flex {
+  display: inline-flex;
+  border: 3px solid grey;
+  height: 73px;
+  width: 110px;
+  align-items: start;
+}
+
+table {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+  flex: auto;
+  min-width: 0;
+  min-height: 0;
+  width: 32px;
+  height: 22px;
+}
+
+caption { border: 1px dashed blue; height: 16px; }
+t { display:block; width:30px; height:20px; }
+i:nth-of-type(1) { width:10px; height:20px; }
+i:nth-of-type(2) { width:20px; height:10px; }
+
+.hma10 { margin: 7px 3px 1px auto; }
+.hmaa  { margin: 7px auto 1px auto; }
+.vma10 { margin: auto 7px 3px 1px; }
+.vmaa  { margin: auto 7px auto 1px; }
+
+.vr { writing-mode: vertical-rl; }
+  </style>
+</head>
+<body>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hma10"><caption></caption><td><t></t></td></table></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hmaa"><caption></caption><td><t></t></td></table><i></i></div>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vma10"><caption></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vmaa"><caption></caption><td><t></t></td></table><i></i></div>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hma10"></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hmaa"></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vma10"></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vmaa"></caption><td><t></t></td></table><i></i></div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-1.html b/layout/reftests/flexbox/flexbox-table-flex-items-1.html
new file mode 100644
index 0000000000..2348e3f80d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-1.html
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: caption size test for table flex items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1334403">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
+  <link rel="match" href="flexbox-table-flex-items-1-ref.html">
+  <style type="text/css">
+* { vertical-align: top; }
+.flex {
+  display: inline-flex;
+  border: 3px solid grey;
+  height: 73px;
+  width: 110px;
+  align-items: start;
+}
+
+table {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+  flex: auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+caption { border: 1px dashed blue;}
+x { display:block; width:16px; height:16px; }
+t { display:block; width:30px; height:20px; }
+i:nth-of-type(1) { width:10px; height:20px; }
+i:nth-of-type(2) { width:20px; height:10px; }
+
+.hma10 { margin: 7px 3px 1px auto; }
+.hmaa  { margin: 7px auto 1px auto; }
+.vma10 { margin: auto 7px 3px 1px; }
+.vmaa  { margin: auto 7px auto 1px; }
+
+.vr { writing-mode: vertical-rl; }
+  </style>
+</head>
+<body>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hma10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hmaa"><caption><x></x></caption><td><t></t></td></table><i></i></div>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vma10"><caption><x></x></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vmaa"><caption><x></x></caption><td><t></t></td></table><i></i></div>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hma10"><x></x></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hmaa"><x></x></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vma10"><x></x></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vmaa"><x></x></caption><td><t></t></td></table><i></i></div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-2-ref.html b/layout/reftests/flexbox/flexbox-table-flex-items-2-ref.html
new file mode 100644
index 0000000000..98a93716a5
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-2-ref.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size">
+  <style>
+  .container {
+    display: flex;
+    width: 100px;
+    border: 1px solid black;
+  }
+
+  /* Two types of flex items: */
+  .table {
+    border: 2px solid teal;
+  }
+  .block {
+    border: 2px solid brown;
+  }
+
+  /* Each flex item gets one of these as its contents,
+     to have a nonzero content size: */
+  ib {
+    display: inline-block;
+    background: blue;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  </style>
+</head>
+<body>
+<!-- auto size: -->
+<div class="container">
+  <div class="table"><ib></ib></div>
+  <div class="block"><ib></ib></div>
+</div>
+
+<!-- px size: -->
+<div class="container">
+  <div class="table" style="width: 30px"><ib></ib></div>
+  <div class="block" style="width: 30px"><ib></ib></div>
+</div>
+
+<!-- % size: -->
+<div class="container">
+  <div class="table" style="width: 30%"><ib></ib></div>
+  <div class="block" style="width: 30%"><ib></ib></div>
+</div>
+
+<!-- calc() size: -->
+<div class="container">
+  <div class="table" style="width: calc(10px + 20%)"><ib></ib></div>
+  <div class="block" style="width: calc(10px + 20%)"><ib></ib></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-2.html b/layout/reftests/flexbox/flexbox-table-flex-items-2.html
new file mode 100644
index 0000000000..c11ce70802
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-2.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>
+    CSS Test: Testing that implicit "flex-basis: content" on table wrapper box
+    doesn't prevent explicit table size from influencing flex base size.
+  </title>
+  <!-- XXXdholbert NOTE: This probably eventually should move to our
+       upstreamed reftest directory.  But for now, this is just asserting
+       backwards-compatible/interoperable (but not necessary spec-compliant)
+       behavior, per https://github.com/w3c/csswg-drafts/issues/2604 -->
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size">
+  <link rel="match" href="flexbox-table-flex-items-2.html">
+  <style>
+  .container {
+    display: flex;
+    width: 100px;
+    border: 1px solid black;
+  }
+
+  /* Two types of flex items: */
+  .table {
+    display: table;
+    border: 2px solid teal;
+  }
+  .block {
+    border: 2px solid brown;
+  }
+
+  /* Each flex item gets one of these as its contents,
+     to have a nonzero content size: */
+  ib {
+    display: inline-block;
+    background: blue;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  </style>
+</head>
+<body>
+<!-- auto size: -->
+<div class="container">
+  <div class="table"><ib></ib></div>
+  <div class="block"><ib></ib></div>
+</div>
+
+<!-- px size: -->
+<div class="container">
+  <div class="table" style="width: 30px"><ib></ib></div>
+  <div class="block" style="width: 30px"><ib></ib></div>
+</div>
+
+<!-- % size: -->
+<div class="container">
+  <div class="table" style="width: 30%"><ib></ib></div>
+  <div class="block" style="width: 30%"><ib></ib></div>
+</div>
+
+<!-- calc() size: -->
+<div class="container">
+  <div class="table" style="width: calc(10px + 20%)"><ib></ib></div>
+  <div class="block" style="width: calc(10px + 20%)"><ib></ib></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-3-ref.html b/layout/reftests/flexbox/flexbox-table-flex-items-3-ref.html
new file mode 100644
index 0000000000..568495f341
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-3-ref.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    height: 100px;
+    float: left;
+    border: 1px solid black;
+  }
+
+  /* Two types of flex items: */
+  .table {
+    border: 2px solid teal;
+  }
+  .block {
+    border: 2px solid brown;
+  }
+
+  /* Each flex item gets one of these as its contents,
+     to have a nonzero content size: */
+  ib {
+    display: inline-block;
+    background: blue;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  </style>
+</head>
+<body>
+<!-- auto size: -->
+<div class="container">
+  <div class="table"><ib></ib></div>
+  <div class="block"><ib></ib></div>
+</div>
+
+<!-- px size: -->
+<div class="container">
+  <div class="table" style="height: 30px"><ib></ib></div>
+  <div class="block" style="height: 30px"><ib></ib></div>
+</div>
+
+<!-- % size: -->
+<div class="container">
+  <div class="table" style="height: 30%"><ib></ib></div>
+  <div class="block" style="height: 30%"><ib></ib></div>
+</div>
+
+<!-- calc() size: -->
+<div class="container">
+  <div class="table" style="height: calc(10px + 20%)"><ib></ib></div>
+  <div class="block" style="height: calc(10px + 20%)"><ib></ib></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-3.html b/layout/reftests/flexbox/flexbox-table-flex-items-3.html
new file mode 100644
index 0000000000..c68152856f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-3.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>
+    CSS Test: Testing that implicit "flex-basis: content" on table wrapper box
+    doesn't prevent explicit table size from influencing flex base size.
+  </title>
+  <!-- XXXdholbert NOTE: This probably eventually should move to our
+       upstreamed reftest directory.  But for now, this is just asserting
+       backwards-compatible/interoperable (but not necessary spec-compliant)
+       behavior, per https://github.com/w3c/csswg-drafts/issues/2604 -->
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size">
+  <link rel="match" href="flexbox-table-flex-items-3.html">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    height: 100px;
+    float: left;
+    border: 1px solid black;
+  }
+
+  /* Two types of flex items: */
+  .table {
+    display: table;
+    border: 2px solid teal;
+  }
+  .block {
+    border: 2px solid brown;
+  }
+
+  /* Each flex item gets one of these as its contents,
+     to have a nonzero content size: */
+  ib {
+    display: inline-block;
+    background: blue;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  </style>
+</head>
+<body>
+<!-- auto size: -->
+<div class="container">
+  <div class="table"><ib></ib></div>
+  <div class="block"><ib></ib></div>
+</div>
+
+<!-- px size: -->
+<div class="container">
+  <div class="table" style="height: 30px"><ib></ib></div>
+  <div class="block" style="height: 30px"><ib></ib></div>
+</div>
+
+<!-- % size: -->
+<div class="container">
+  <div class="table" style="height: 30%"><ib></ib></div>
+  <div class="block" style="height: 30%"><ib></ib></div>
+</div>
+
+<!-- calc() size: -->
+<div class="container">
+  <div class="table" style="height: calc(10px + 20%)"><ib></ib></div>
+  <div class="block" style="height: calc(10px + 20%)"><ib></ib></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-4-ref.html b/layout/reftests/flexbox/flexbox-table-flex-items-4-ref.html
new file mode 100644
index 0000000000..ac18887826
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-4-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>
+    CSS Reference Case
+  </title>
+  <style>
+    .container {
+      display: flex;
+      flex-wrap: wrap;
+      width: 300px;
+      border: 1px solid black;
+      font: 12px monospace;
+      margin-bottom: 5px;
+    }
+    .container > * {
+      flex: 1 400px; /* Bigger than flex container;
+                        should linewrap and cooperatively shrink to fit. */
+      padding: 5px 10px;
+    }
+    table {
+      width: 100%;
+      background: lightgray;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div>
+      <table><td>a</td></table>
+    </div>
+    <div>
+      <table><td>b</td></table>
+    </div>
+  </div>
+  <div class="container">
+    <div>
+      <table><td>a</td></table>
+    </div>
+    <div>
+      <table><td>b</td></table>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-4.html b/layout/reftests/flexbox/flexbox-table-flex-items-4.html
new file mode 100644
index 0000000000..9e6e5f3dc0
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-4.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>
+    CSS Test: Testing that tables with "table-layout:fixed" can shrink
+    from their default flex base size to fit their multi-line flex container.
+  </title>
+  <style>
+    .container {
+      display: flex;
+      flex-wrap: wrap;
+      width: 300px;
+      border: 1px solid black;
+      font: 12px monospace;
+      margin-bottom: 5px;
+    }
+    .forceMaxContent > * {
+      width: max-content;
+    }
+    .container > * {
+      display: flex;
+      padding: 5px 10px;
+    }
+    table {
+      width: 100%;
+      table-layout: fixed;
+      background: lightgray;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div>
+      <table><td>a</td></table>
+    </div>
+    <div>
+      <table><td>b</td></table>
+    </div>
+  </div>
+  <div class="container forceMaxContent">
+    <div>
+      <table><td>a</td></table>
+    </div>
+    <div>
+      <table><td>b</td></table>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-5-ref.html b/layout/reftests/flexbox/flexbox-table-flex-items-5-ref.html
new file mode 100644
index 0000000000..664d7a33dd
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-5-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>
+    CSS Reference Case
+  </title>
+  <style>
+    .container {
+      display: flex;
+      width: 300px;
+      border: 1px solid black;
+      margin-bottom: 5px;
+    }
+    .container > * {
+      margin: 5px;
+      background: lightgray;
+      flex: 1 400px; /* Bigger than flex container; should cooperatively shrink to fit. */
+      height: 30px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div>
+      <table><td></td></table>
+    </div>
+    <div>
+      <table><td></td></table>
+    </div>
+  </div>
+  <div class="container">
+    <div>
+      <table><td></td></table>
+    </div>
+    <div>
+      <table><td></td></table>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-5.html b/layout/reftests/flexbox/flexbox-table-flex-items-5.html
new file mode 100644
index 0000000000..2023e1c58b
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-5.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>
+    CSS Test: Testing that tables with "table-layout:fixed" can shrink
+    from their default flex base size to fit their flex container.
+  </title>
+  <style>
+    .container {
+      display: flex;
+      width: 300px;
+      border: 1px solid black;
+      margin-bottom: 5px;
+    }
+    .forceMaxContent > * {
+      width: max-content;
+    }
+    .container > * {
+      margin: 5px;
+    }
+    table {
+      width: 100%;
+      height: 30px;
+      table-layout: fixed;
+      background: lightgray;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div>
+      <table><td></td></table>
+    </div>
+    <div>
+      <table><td></td></table>
+    </div>
+  </div>
+  <div class="container forceMaxContent">
+    <div>
+      <table><td></td></table>
+    </div>
+    <div>
+      <table><td></td></table>
+    </div>
+  </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 0000000000..f08e16d265
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-1-ref.html
@@ -0,0 +1,35 @@
+<!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: 40px;
+      margin-bottom: 10px;
+    }
+    div.flexbox > * {
+      width: -moz-available;
+      outline: 1px dashed black;
+      margin: 0;
+      vertical-align: top;
+      display: block;
+    }
+  </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 0000000000..317112e9fb
--- /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: flex;
+      align-items: flex-start;
+      border: 2px dotted lightgray;
+      width: 400px;
+      height: 40px;
+      margin-bottom: 10px;
+    }
+    div.flexbox > * {
+      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 0000000000..ac52a17d84
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-2-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: 400px;
+      height: 40px;
+      margin-bottom: 10px;
+    }
+    div.flexbox > * {
+      min-width: 350px;
+      outline: 1px dashed black;
+      margin: 0;
+      vertical-align: top;
+      display: block;
+      width: max-content;
+    }
+  </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 0000000000..7e2ec2908c
--- /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: flex;
+      align-items: flex-start;
+      background: lightgray;
+      width: 400px;
+      height: 40px;
+      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 0000000000..61eb376384
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-3-ref.html
@@ -0,0 +1,35 @@
+<!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: 40px;
+      margin-bottom: 10px;
+    }
+    div.flexbox > * {
+      max-width: 3px;
+      outline: 1px dashed black;
+      margin: 0;
+      vertical-align: top;
+      display: block;
+    }
+  </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 0000000000..dee3b4ad0c
--- /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: flex;
+      align-items: flex-start;
+      background: lightgray;
+      width: 400px;
+      height: 40px;
+      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 0000000000..b34c4f51d5
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-4-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <style>
+    div.flexbox {
+      background: lightgray;
+      float: left;
+      height: 60px;
+      margin-right: 10px;
+    }
+    div.flexbox > * {
+      outline: 1px dashed black;
+      margin: 0;
+      vertical-align: top;
+      height: 100%;
+      display: block;
+    }
+    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 0000000000..bb7c5e9584
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-4.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, 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.
+
+    These widgets can be allowed to be resized on some platforms but not others.
+    We'll account for that by giving them height: 100% in the reference case,
+    so that if they're allowed to stretch, then they'll stretch in both the
+    reference case and the testcase.
+-->
+<html>
+<head>
+  <style>
+    div.flexbox {
+      display: flex;
+      background: lightgray;
+      float: left;
+      height: 60px;
+      margin-right: 10px;
+    }
+    div.flexbox > * {
+      outline: 1px dashed black;
+      margin: 0;
+      vertical-align: top;
+      height: auto;
+      align-self: stretch;
+    }
+    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/pagination/flexbox-empty-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html
new file mode 100644
index 0000000000..21d3342d90
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 20px;
+      column-fill: auto;
+      border: 2px solid orange;
+    }
+    .flexContainer {
+      background: teal;
+      /* border-width is 0 by default; some sub-testcases will increase it. */
+      border: 0 dashed black;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- NO BORDERS/PADDING -->
+    <!-- ================== -->
+    <!-- content fits exactly into 1 column: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 10px"></div>
+    </div>
+
+    <!-- content fits, but margin-top pushes it to overflow: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        margin-top: 2px;"></div>
+    </div>
+
+    <!-- content is too tall, by 1px: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 11px"></div>
+    </div>
+
+    <!-- BORDERS/PADDING ON TOP -->
+    <!-- ====================== -->
+    <!-- content fits, but border-top makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 2px"></div>
+    </div>
+
+    <!-- content fits, but padding-top makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-top: 2px"></div>
+    </div>
+
+    <!-- content fits, but border/padding-top make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 1px;
+                                        padding-top: 1px"></div>
+    </div>
+
+    <!-- BORDERS/PADDING ON BOTTOM -->
+    <!-- ========================= -->
+    <!-- content fits, but border-bottom-width makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-bottom-width: 2px"></div>
+    </div>
+
+    <!-- content fits, but padding-bottom makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-bottom: 2px"></div>
+    </div>
+
+    <!-- content fits, but border/padding-bottom make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-bottom-width: 1px;
+                                        padding-bottom: 1px"></div>
+    </div>
+
+    <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+    <!-- ================================= -->
+    <!-- content fits, but border-top/bottom combined make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 1px;
+                                        border-bottom-width: 1px"></div>
+    </div>
+
+    <!-- content fits, but padding-top/bottom combined make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-top: 1px;
+                                        padding-bottom: 1px"></div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1a.html b/layout/reftests/flexbox/pagination/flexbox-empty-1a.html
new file mode 100644
index 0000000000..bbb7b8ce02
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1a.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+     various combinations of margin/border/padding helping it to be too tall,
+     and with the flex container having "flex-direction: row".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 20px;
+      column-fill: auto;
+      border: 2px solid orange;
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: row;
+      background: teal;
+      /* border-width is 0 by default; some sub-testcases will increase it. */
+      border: 0 dashed black;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- NO BORDERS/PADDING -->
+    <!-- ================== -->
+    <!-- content fits exactly into 1 column: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 10px"></div>
+    </div>
+
+    <!-- content fits, but margin-top pushes it to overflow: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        margin-top: 2px;"></div>
+    </div>
+
+    <!-- content is too tall, by 1px: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 11px"></div>
+    </div>
+
+    <!-- BORDERS/PADDING ON TOP -->
+    <!-- ====================== -->
+    <!-- content fits, but border-top makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 2px"></div>
+    </div>
+
+    <!-- content fits, but padding-top makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-top: 2px"></div>
+    </div>
+
+    <!-- content fits, but border/padding-top make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 1px;
+                                        padding-top: 1px"></div>
+    </div>
+
+    <!-- BORDERS/PADDING ON BOTTOM -->
+    <!-- ========================= -->
+    <!-- content fits, but border-bottom-width makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-bottom-width: 2px"></div>
+    </div>
+
+    <!-- content fits, but padding-bottom makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-bottom: 2px"></div>
+    </div>
+
+    <!-- content fits, but border/padding-bottom make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-bottom-width: 1px;
+                                        padding-bottom: 1px"></div>
+    </div>
+
+    <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+    <!-- ================================= -->
+    <!-- content fits, but border-top/bottom combined make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 1px;
+                                        border-bottom-width: 1px"></div>
+    </div>
+
+    <!-- content fits, but padding-top/bottom combined make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-top: 1px;
+                                        padding-bottom: 1px"></div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1b.html b/layout/reftests/flexbox/pagination/flexbox-empty-1b.html
new file mode 100644
index 0000000000..67cd110973
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1b.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+     various combinations of margin/border/padding helping it to be too tall,
+     and with the flex container having "flex-direction: row-reverse".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 20px;
+      column-fill: auto;
+      border: 2px solid orange;
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: row-reverse;
+      background: teal;
+      /* border-width is 0 by default; some sub-testcases will increase it. */
+      border: 0 dashed black;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- NO BORDERS/PADDING -->
+    <!-- ================== -->
+    <!-- content fits exactly into 1 column: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 10px"></div>
+    </div>
+
+    <!-- content fits, but margin-top pushes it to overflow: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        margin-top: 2px;"></div>
+    </div>
+
+    <!-- content is too tall, by 1px: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 11px"></div>
+    </div>
+
+    <!-- BORDERS/PADDING ON TOP -->
+    <!-- ====================== -->
+    <!-- content fits, but border-top makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 2px"></div>
+    </div>
+
+    <!-- content fits, but padding-top makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-top: 2px"></div>
+    </div>
+
+    <!-- content fits, but border/padding-top make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 1px;
+                                        padding-top: 1px"></div>
+    </div>
+
+    <!-- BORDERS/PADDING ON BOTTOM -->
+    <!-- ========================= -->
+    <!-- content fits, but border-bottom-width makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-bottom-width: 2px"></div>
+    </div>
+
+    <!-- content fits, but padding-bottom makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-bottom: 2px"></div>
+    </div>
+
+    <!-- content fits, but border/padding-bottom make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-bottom-width: 1px;
+                                        padding-bottom: 1px"></div>
+    </div>
+
+    <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+    <!-- ================================= -->
+    <!-- content fits, but border-top/bottom combined make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 1px;
+                                        border-bottom-width: 1px"></div>
+    </div>
+
+    <!-- content fits, but padding-top/bottom combined make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-top: 1px;
+                                        padding-bottom: 1px"></div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1c.html b/layout/reftests/flexbox/pagination/flexbox-empty-1c.html
new file mode 100644
index 0000000000..ba560e9bd9
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1c.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+     various combinations of margin/border/padding helping it to be too tall,
+     and with the flex container having "flex-direction: column".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 20px;
+      column-fill: auto;
+      border: 2px solid orange;
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: column;
+      background: teal;
+      /* border-width is 0 by default; some sub-testcases will increase it. */
+      border: 0 dashed black;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- NO BORDERS/PADDING -->
+    <!-- ================== -->
+    <!-- content fits exactly into 1 column: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 10px"></div>
+    </div>
+
+    <!-- content fits, but margin-top pushes it to overflow: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        margin-top: 2px;"></div>
+    </div>
+
+    <!-- content is too tall, by 1px: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 11px"></div>
+    </div>
+
+    <!-- BORDERS/PADDING ON TOP -->
+    <!-- ====================== -->
+    <!-- content fits, but border-top makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 2px"></div>
+    </div>
+
+    <!-- content fits, but padding-top makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-top: 2px"></div>
+    </div>
+
+    <!-- content fits, but border/padding-top make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 1px;
+                                        padding-top: 1px"></div>
+    </div>
+
+    <!-- BORDERS/PADDING ON BOTTOM -->
+    <!-- ========================= -->
+    <!-- content fits, but border-bottom-width makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-bottom-width: 2px"></div>
+    </div>
+
+    <!-- content fits, but padding-bottom makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-bottom: 2px"></div>
+    </div>
+
+    <!-- content fits, but border/padding-bottom make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-bottom-width: 1px;
+                                        padding-bottom: 1px"></div>
+    </div>
+
+    <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+    <!-- ================================= -->
+    <!-- content fits, but border-top/bottom combined make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 1px;
+                                        border-bottom-width: 1px"></div>
+    </div>
+
+    <!-- content fits, but padding-top/bottom combined make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-top: 1px;
+                                        padding-bottom: 1px"></div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1d.html b/layout/reftests/flexbox/pagination/flexbox-empty-1d.html
new file mode 100644
index 0000000000..6a56362525
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1d.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+     various combinations of margin/border/padding helping it to be too tall,
+     and with the flex container having "flex-direction: column-reverse".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 20px;
+      column-fill: auto;
+      border: 2px solid orange;
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: column-reverse;
+      background: teal;
+      /* border-width is 0 by default; some sub-testcases will increase it. */
+      border: 0 dashed black;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- NO BORDERS/PADDING -->
+    <!-- ================== -->
+    <!-- content fits exactly into 1 column: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 10px"></div>
+    </div>
+
+    <!-- content fits, but margin-top pushes it to overflow: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        margin-top: 2px;"></div>
+    </div>
+
+    <!-- content is too tall, by 1px: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 11px"></div>
+    </div>
+
+    <!-- BORDERS/PADDING ON TOP -->
+    <!-- ====================== -->
+    <!-- content fits, but border-top makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 2px"></div>
+    </div>
+
+    <!-- content fits, but padding-top makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-top: 2px"></div>
+    </div>
+
+    <!-- content fits, but border/padding-top make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 1px;
+                                        padding-top: 1px"></div>
+    </div>
+
+    <!-- BORDERS/PADDING ON BOTTOM -->
+    <!-- ========================= -->
+    <!-- content fits, but border-bottom-width makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-bottom-width: 2px"></div>
+    </div>
+
+    <!-- content fits, but padding-bottom makes us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-bottom: 2px"></div>
+    </div>
+
+    <!-- content fits, but border/padding-bottom make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-bottom-width: 1px;
+                                        padding-bottom: 1px"></div>
+    </div>
+
+    <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+    <!-- ================================= -->
+    <!-- content fits, but border-top/bottom combined make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 1px;
+                                        border-bottom-width: 1px"></div>
+    </div>
+
+    <!-- content fits, but padding-top/bottom combined make us too tall: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-top: 1px;
+                                        padding-bottom: 1px"></div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1e.html b/layout/reftests/flexbox/pagination/flexbox-empty-1e.html
new file mode 100644
index 0000000000..49f859e4b5
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1e.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+     various combinations of margin/border/padding helping it to be too tall,
+     with the flex container overflowing its fixed-height-block parent,
+     and with the flex container having "flex-direction: row".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 20px;
+      column-fill: auto;
+      border: 2px solid orange;
+    }
+    .fixedHeightBlock {
+      height: 2px;
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: row;
+      background: teal;
+      /* border-width is 0 by default; some sub-testcases will increase it. */
+      border: 0 dashed black;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- NO BORDERS/PADDING -->
+    <!-- ================== -->
+    <!-- content fits exactly into 1 column: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 10px"></div>
+    </div></div>
+
+    <!-- content fits, but margin-top pushes it to overflow: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        margin-top: 2px;"></div>
+    </div></div>
+
+    <!-- content is too tall, by 1px: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 11px"></div>
+    </div></div>
+
+    <!-- BORDERS/PADDING ON TOP -->
+    <!-- ====================== -->
+    <!-- content fits, but border-top makes us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 2px"></div>
+    </div></div>
+
+    <!-- content fits, but padding-top makes us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-top: 2px"></div>
+    </div></div>
+
+    <!-- content fits, but border/padding-top make us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 1px;
+                                        padding-top: 1px"></div>
+    </div></div>
+
+    <!-- BORDERS/PADDING ON BOTTOM -->
+    <!-- ========================= -->
+    <!-- content fits, but border-bottom-width makes us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-bottom-width: 2px"></div>
+    </div></div>
+
+    <!-- content fits, but padding-bottom makes us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-bottom: 2px"></div>
+    </div></div>
+
+    <!-- content fits, but border/padding-bottom make us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-bottom-width: 1px;
+                                        padding-bottom: 1px"></div>
+    </div></div>
+
+    <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+    <!-- ================================= -->
+    <!-- content fits, but border-top/bottom combined make us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 1px;
+                                        border-bottom-width: 1px"></div>
+    </div></div>
+
+    <!-- content fits, but padding-top/bottom combined make us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-top: 1px;
+                                        padding-bottom: 1px"></div>
+    </div></div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1f.html b/layout/reftests/flexbox/pagination/flexbox-empty-1f.html
new file mode 100644
index 0000000000..7626af8d6a
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1f.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+     various combinations of margin/border/padding helping it to be too tall,
+     with the flex container overflowing its fixed-height-block parent,
+     and with the flex container having "flex-direction: row-reverse".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 20px;
+      column-fill: auto;
+      border: 2px solid orange;
+    }
+    .fixedHeightBlock {
+      height: 2px;
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: row-reverse;
+      background: teal;
+      /* border-width is 0 by default; some sub-testcases will increase it. */
+      border: 0 dashed black;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- NO BORDERS/PADDING -->
+    <!-- ================== -->
+    <!-- content fits exactly into 1 column: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 10px"></div>
+    </div></div>
+
+    <!-- content fits, but margin-top pushes it to overflow: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        margin-top: 2px;"></div>
+    </div></div>
+
+    <!-- content is too tall, by 1px: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 11px"></div>
+    </div></div>
+
+    <!-- BORDERS/PADDING ON TOP -->
+    <!-- ====================== -->
+    <!-- content fits, but border-top makes us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 2px"></div>
+    </div></div>
+
+    <!-- content fits, but padding-top makes us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-top: 2px"></div>
+    </div></div>
+
+    <!-- content fits, but border/padding-top make us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 1px;
+                                        padding-top: 1px"></div>
+    </div></div>
+
+    <!-- BORDERS/PADDING ON BOTTOM -->
+    <!-- ========================= -->
+    <!-- content fits, but border-bottom-width makes us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-bottom-width: 2px"></div>
+    </div></div>
+
+    <!-- content fits, but padding-bottom makes us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-bottom: 2px"></div>
+    </div></div>
+
+    <!-- content fits, but border/padding-bottom make us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-bottom-width: 1px;
+                                        padding-bottom: 1px"></div>
+    </div></div>
+
+    <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+    <!-- ================================= -->
+    <!-- content fits, but border-top/bottom combined make us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 1px;
+                                        border-bottom-width: 1px"></div>
+    </div></div>
+
+    <!-- content fits, but padding-top/bottom combined make us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-top: 1px;
+                                        padding-bottom: 1px"></div>
+    </div></div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1g.html b/layout/reftests/flexbox/pagination/flexbox-empty-1g.html
new file mode 100644
index 0000000000..7d9f44158f
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1g.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+     various combinations of margin/border/padding helping it to be too tall,
+     with the flex container overflowing its fixed-height-block parent,
+     and with the flex container having "flex-direction: column".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 20px;
+      column-fill: auto;
+      border: 2px solid orange;
+    }
+    .fixedHeightBlock {
+      height: 2px;
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: column;
+      background: teal;
+      /* border-width is 0 by default; some sub-testcases will increase it. */
+      border: 0 dashed black;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- NO BORDERS/PADDING -->
+    <!-- ================== -->
+    <!-- content fits exactly into 1 column: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 10px"></div>
+    </div></div>
+
+    <!-- content fits, but margin-top pushes it to overflow: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        margin-top: 2px;"></div>
+    </div></div>
+
+    <!-- content is too tall, by 1px: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 11px"></div>
+    </div></div>
+
+    <!-- BORDERS/PADDING ON TOP -->
+    <!-- ====================== -->
+    <!-- content fits, but border-top makes us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 2px"></div>
+    </div></div>
+
+    <!-- content fits, but padding-top makes us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-top: 2px"></div>
+    </div></div>
+
+    <!-- content fits, but border/padding-top make us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 1px;
+                                        padding-top: 1px"></div>
+    </div></div>
+
+    <!-- BORDERS/PADDING ON BOTTOM -->
+    <!-- ========================= -->
+    <!-- content fits, but border-bottom-width makes us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-bottom-width: 2px"></div>
+    </div></div>
+
+    <!-- content fits, but padding-bottom makes us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-bottom: 2px"></div>
+    </div></div>
+
+    <!-- content fits, but border/padding-bottom make us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-bottom-width: 1px;
+                                        padding-bottom: 1px"></div>
+    </div></div>
+
+    <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+    <!-- ================================= -->
+    <!-- content fits, but border-top/bottom combined make us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 1px;
+                                        border-bottom-width: 1px"></div>
+    </div></div>
+
+    <!-- content fits, but padding-top/bottom combined make us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-top: 1px;
+                                        padding-bottom: 1px"></div>
+    </div></div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1h.html b/layout/reftests/flexbox/pagination/flexbox-empty-1h.html
new file mode 100644
index 0000000000..37b6405a55
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1h.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+     various combinations of margin/border/padding helping it to be too tall,
+     with the flex container overflowing its fixed-height-block parent,
+     and with the flex container having "flex-direction: column-reverse".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 20px;
+      column-fill: auto;
+      border: 2px solid orange;
+    }
+    .fixedHeightBlock {
+      height: 2px;
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: column-reverse;
+      background: teal;
+      /* border-width is 0 by default; some sub-testcases will increase it. */
+      border: 0 dashed black;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- NO BORDERS/PADDING -->
+    <!-- ================== -->
+    <!-- content fits exactly into 1 column: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 10px"></div>
+    </div></div>
+
+    <!-- content fits, but margin-top pushes it to overflow: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        margin-top: 2px;"></div>
+    </div></div>
+
+    <!-- content is too tall, by 1px: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 11px"></div>
+    </div></div>
+
+    <!-- BORDERS/PADDING ON TOP -->
+    <!-- ====================== -->
+    <!-- content fits, but border-top makes us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 2px"></div>
+    </div></div>
+
+    <!-- content fits, but padding-top makes us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-top: 2px"></div>
+    </div></div>
+
+    <!-- content fits, but border/padding-top make us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 1px;
+                                        padding-top: 1px"></div>
+    </div></div>
+
+    <!-- BORDERS/PADDING ON BOTTOM -->
+    <!-- ========================= -->
+    <!-- content fits, but border-bottom-width makes us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-bottom-width: 2px"></div>
+    </div></div>
+
+    <!-- content fits, but padding-bottom makes us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-bottom: 2px"></div>
+    </div></div>
+
+    <!-- content fits, but border/padding-bottom make us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-bottom-width: 1px;
+                                        padding-bottom: 1px"></div>
+    </div></div>
+
+    <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+    <!-- ================================= -->
+    <!-- content fits, but border-top/bottom combined make us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        border-top-width: 1px;
+                                        border-bottom-width: 1px"></div>
+    </div></div>
+
+    <!-- content fits, but padding-top/bottom combined make us too tall: -->
+    <div class="multicol"><div class="fixedHeightBlock">
+      <div class="flexContainer" style="height: 9px;
+                                        padding-top: 1px;
+                                        padding-bottom: 1px"></div>
+    </div></div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html
new file mode 100644
index 0000000000..f6911915c8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+     margin/border/padding that are larger than the available height,
+     and with the flex container having "flex-direction: row".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 20px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 2px;
+    }
+    .flexContainer {
+      background: teal;
+      /* border-width is 0 by default; some sub-testcases will increase it. */
+      border: 0 dashed black;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+    <!-- =================================== -->
+    <!-- margin-top is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-top: 10px"></div>
+    </div>
+
+    <!-- margin-top is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-top: 11px"></div>
+    </div>
+
+    <!-- margin-bottom is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-bottom: 10px"></div>
+    </div>
+
+    <!-- margin-bottom is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-bottom: 11px"></div>
+    </div>
+
+    <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+    <!-- =================================== -->
+    <!-- border-top-width is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top-width: 10px"></div>
+    </div>
+
+    <!-- border-top-width is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top-width: 11px"></div>
+    </div>
+
+    <!-- border-bottom-width is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom-width: 10px"></div>
+    </div>
+
+    <!-- border-bottom-width is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom-width: 11px"></div>
+    </div>
+
+    <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+    <!-- ==================================== -->
+    <!-- padding-top is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-top: 10px"></div>
+    </div>
+
+    <!-- padding-top is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-top: 11px"></div>
+    </div>
+
+    <!-- padding-bottom is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-bottom: 10px"></div>
+    </div>
+
+    <!-- padding-bottom is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-bottom: 11px"></div>
+    </div>
+
+    <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+    <!-- =========================================== -->
+    <!-- border+padding-top is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top: 5px;
+                                        padding-top: 5px"></div>
+    </div>
+
+    <!-- padding-top is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top: 6px;
+                                        padding-top: 6px"></div>
+    </div>
+
+    <!-- padding-bottom is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom: 5px;
+                                        padding-bottom: 5px"></div>
+    </div>
+
+    <!-- padding-bottom is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom: 6px;
+                                        padding-bottom: 6px"></div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2a.html b/layout/reftests/flexbox/pagination/flexbox-empty-2a.html
new file mode 100644
index 0000000000..b9f98edefa
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2a.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+     margin/border/padding that are larger than the available height,
+     and with the flex container having "flex-direction: row".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 20px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 2px;
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: row;
+      background: teal;
+      /* border-width is 0 by default; some sub-testcases will increase it. */
+      border: 0 dashed black;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+    <!-- =================================== -->
+    <!-- margin-top is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-top: 10px"></div>
+    </div>
+
+    <!-- margin-top is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-top: 11px"></div>
+    </div>
+
+    <!-- margin-bottom is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-bottom: 10px"></div>
+    </div>
+
+    <!-- margin-bottom is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-bottom: 11px"></div>
+    </div>
+
+    <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+    <!-- =================================== -->
+    <!-- border-top-width is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top-width: 10px"></div>
+    </div>
+
+    <!-- border-top-width is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top-width: 11px"></div>
+    </div>
+
+    <!-- border-bottom-width is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom-width: 10px"></div>
+    </div>
+
+    <!-- border-bottom-width is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom-width: 11px"></div>
+    </div>
+
+    <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+    <!-- ==================================== -->
+    <!-- padding-top is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-top: 10px"></div>
+    </div>
+
+    <!-- padding-top is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-top: 11px"></div>
+    </div>
+
+    <!-- padding-bottom is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-bottom: 10px"></div>
+    </div>
+
+    <!-- padding-bottom is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-bottom: 11px"></div>
+    </div>
+
+    <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+    <!-- =========================================== -->
+    <!-- border+padding-top is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top: 5px;
+                                        padding-top: 5px"></div>
+    </div>
+
+    <!-- padding-top is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top: 6px;
+                                        padding-top: 6px"></div>
+    </div>
+
+    <!-- padding-bottom is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom: 5px;
+                                        padding-bottom: 5px"></div>
+    </div>
+
+    <!-- padding-bottom is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom: 6px;
+                                        padding-bottom: 6px"></div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2b.html b/layout/reftests/flexbox/pagination/flexbox-empty-2b.html
new file mode 100644
index 0000000000..e8c85f2a41
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2b.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+     margin/border/padding that are larger than the available height,
+     and with the flex container having "flex-direction: row-reverse".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 20px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 2px;
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: row-reverse;
+      background: teal;
+      /* border-width is 0 by default; some sub-testcases will increase it. */
+      border: 0 dashed black;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+    <!-- =================================== -->
+    <!-- margin-top is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-top: 10px"></div>
+    </div>
+
+    <!-- margin-top is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-top: 11px"></div>
+    </div>
+
+    <!-- margin-bottom is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-bottom: 10px"></div>
+    </div>
+
+    <!-- margin-bottom is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-bottom: 11px"></div>
+    </div>
+
+    <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+    <!-- =================================== -->
+    <!-- border-top-width is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top-width: 10px"></div>
+    </div>
+
+    <!-- border-top-width is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top-width: 11px"></div>
+    </div>
+
+    <!-- border-bottom-width is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom-width: 10px"></div>
+    </div>
+
+    <!-- border-bottom-width is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom-width: 11px"></div>
+    </div>
+
+    <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+    <!-- ==================================== -->
+    <!-- padding-top is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-top: 10px"></div>
+    </div>
+
+    <!-- padding-top is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-top: 11px"></div>
+    </div>
+
+    <!-- padding-bottom is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-bottom: 10px"></div>
+    </div>
+
+    <!-- padding-bottom is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-bottom: 11px"></div>
+    </div>
+
+    <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+    <!-- =========================================== -->
+    <!-- border+padding-top is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top: 5px;
+                                        padding-top: 5px"></div>
+    </div>
+
+    <!-- padding-top is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top: 6px;
+                                        padding-top: 6px"></div>
+    </div>
+
+    <!-- padding-bottom is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom: 5px;
+                                        padding-bottom: 5px"></div>
+    </div>
+
+    <!-- padding-bottom is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom: 6px;
+                                        padding-bottom: 6px"></div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2c.html b/layout/reftests/flexbox/pagination/flexbox-empty-2c.html
new file mode 100644
index 0000000000..57c63cc68b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2c.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+     margin/border/padding that are larger than the available height,
+     and with the flex container having "flex-direction: column".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 20px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 2px;
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: column;
+      background: teal;
+      /* border-width is 0 by default; some sub-testcases will increase it. */
+      border: 0 dashed black;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+    <!-- =================================== -->
+    <!-- margin-top is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-top: 10px"></div>
+    </div>
+
+    <!-- margin-top is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-top: 11px"></div>
+    </div>
+
+    <!-- margin-bottom is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-bottom: 10px"></div>
+    </div>
+
+    <!-- margin-bottom is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-bottom: 11px"></div>
+    </div>
+
+    <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+    <!-- =================================== -->
+    <!-- border-top-width is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top-width: 10px"></div>
+    </div>
+
+    <!-- border-top-width is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top-width: 11px"></div>
+    </div>
+
+    <!-- border-bottom-width is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom-width: 10px"></div>
+    </div>
+
+    <!-- border-bottom-width is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom-width: 11px"></div>
+    </div>
+
+    <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+    <!-- ==================================== -->
+    <!-- padding-top is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-top: 10px"></div>
+    </div>
+
+    <!-- padding-top is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-top: 11px"></div>
+    </div>
+
+    <!-- padding-bottom is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-bottom: 10px"></div>
+    </div>
+
+    <!-- padding-bottom is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-bottom: 11px"></div>
+    </div>
+
+    <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+    <!-- =========================================== -->
+    <!-- border+padding-top is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top: 5px;
+                                        padding-top: 5px"></div>
+    </div>
+
+    <!-- padding-top is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top: 6px;
+                                        padding-top: 6px"></div>
+    </div>
+
+    <!-- padding-bottom is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom: 5px;
+                                        padding-bottom: 5px"></div>
+    </div>
+
+    <!-- padding-bottom is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom: 6px;
+                                        padding-bottom: 6px"></div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2d.html b/layout/reftests/flexbox/pagination/flexbox-empty-2d.html
new file mode 100644
index 0000000000..bff0016745
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2d.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+     margin/border/padding that are larger than the available height,
+     and with the flex container having "flex-direction: column-reverse".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 20px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 2px;
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: column-reverse;
+      background: teal;
+      /* border-width is 0 by default; some sub-testcases will increase it. */
+      border: 0 dashed black;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+    <!-- =================================== -->
+    <!-- margin-top is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-top: 10px"></div>
+    </div>
+
+    <!-- margin-top is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-top: 11px"></div>
+    </div>
+
+    <!-- margin-bottom is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-bottom: 10px"></div>
+    </div>
+
+    <!-- margin-bottom is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        margin-bottom: 11px"></div>
+    </div>
+
+    <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+    <!-- =================================== -->
+    <!-- border-top-width is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top-width: 10px"></div>
+    </div>
+
+    <!-- border-top-width is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top-width: 11px"></div>
+    </div>
+
+    <!-- border-bottom-width is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom-width: 10px"></div>
+    </div>
+
+    <!-- border-bottom-width is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom-width: 11px"></div>
+    </div>
+
+    <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+    <!-- ==================================== -->
+    <!-- padding-top is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-top: 10px"></div>
+    </div>
+
+    <!-- padding-top is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-top: 11px"></div>
+    </div>
+
+    <!-- padding-bottom is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-bottom: 10px"></div>
+    </div>
+
+    <!-- padding-bottom is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        padding-bottom: 11px"></div>
+    </div>
+
+    <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+    <!-- =========================================== -->
+    <!-- border+padding-top is the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top: 5px;
+                                        padding-top: 5px"></div>
+    </div>
+
+    <!-- padding-top is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-top: 6px;
+                                        padding-top: 6px"></div>
+    </div>
+
+    <!-- padding-bottom is exactly the available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom: 5px;
+                                        padding-bottom: 5px"></div>
+    </div>
+
+    <!-- padding-bottom is larger than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px;
+                                        border-bottom: 6px;
+                                        padding-bottom: 6px"></div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1-ref.html
new file mode 100644
index 0000000000..2ee6901e7d
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1-ref.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of multi-line column flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .gap {
+    block-size: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    position: relative;
+    inset-inline-start: 5px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    position: relative;
+    inset-inline-start: 10px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1a.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1a.html
new file mode 100644
index 0000000000..349b7f92e7
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1a.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1b.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1b.html
new file mode 100644
index 0000000000..660a8e1398
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1b.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1c.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1c.html
new file mode 100644
index 0000000000..ceaf678e41
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1c.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column flex container with flexible length flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 150px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    flex-grow: 2;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    flex-grow: 1;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    flex-grow: 1;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    flex-grow: 2;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1d.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1d.html
new file mode 100644
index 0000000000..44ddf8a61b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1d.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column-reverse flex container with flexible length flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 150px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+    flex-grow: 2;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    flex-grow: 1;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    flex-grow: 1;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    flex-grow: 2;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1e.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1e.html
new file mode 100644
index 0000000000..24f8e14b9b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1e.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with block-size:auto flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+  }
+  header > div {
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    align-self: flex-start;
+  }
+  nav > div {
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    align-self: center;
+  }
+  article > div {
+    block-size: 25px;
+  }
+  footer {
+    background: black;
+    align-self: flex-end;
+  }
+  footer > div {
+    block-size: 50px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1f.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1f.html
new file mode 100644
index 0000000000..54c99d4078
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1f.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with block-size:auto flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+  }
+  footer > div {
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    align-self: flex-start;
+  }
+  article > div {
+    block-size: 25px;
+  }
+  nav {
+    background: yellow;
+    align-self: center;
+  }
+  nav > div {
+    block-size: 25px;
+  }
+  header {
+    background: black;
+    align-self: flex-end;
+  }
+  header > div {
+    block-size: 50px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1g.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1g.html
new file mode 100644
index 0000000000..9ab52a8a39
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1g.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  .multicol {
+    block-size: 30px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1h.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1h.html
new file mode 100644
index 0000000000..83f99ea000
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1h.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  .multicol {
+    block-size: 30px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1i.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1i.html
new file mode 100644
index 0000000000..aade35b4d6
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1i.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  .multicol {
+    block-size: 80px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1j.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1j.html
new file mode 100644
index 0000000000..6ccc50a553
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1j.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  .multicol {
+    block-size: 80px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-2-ref.html
new file mode 100644
index 0000000000..8881dd7174
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-2-ref.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of multi-line column flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 90px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 60px;
+    position: relative;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    inline-size: 20px;
+  }
+  header {
+    background: cyan;
+    block-size: 50px;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 30px;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    position: absolute;
+    inset-block-start: 25px;
+    inset-inline-start: 35px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 70px;
+  }
+  .border-padding > header, .border-padding > nav, .border-padding > footer {
+    inset-block-start: 5px;
+  }
+  .border-padding > article {
+    inset-block-start: 30px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article style="inset-block-start: 30px"></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article style="inset-block-start: 35px"></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-2.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-2.html
new file mode 100644
index 0000000000..070cea0de4
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-2.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-2-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. The block-size of the flex container is made shorter than its flex items.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 90px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    /* Block-size is deliberately made so that the flex items are wrapping into
+       three lines, and each line is 30px wide. */
+    block-size: 60px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    inline-size: 20px;
+  }
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1-ref.html
new file mode 100644
index 0000000000..ee12682ef1
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of multi-line column flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .gap {
+    block-size: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    position: relative;
+    inset-inline-start: 5px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    position: relative;
+    inset-inline-start: 10px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1a.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1a.html
new file mode 100644
index 0000000000..8ac70d9774
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1a.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1b.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1b.html
new file mode 100644
index 0000000000..042f09f424
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1b.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1c.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1c.html
new file mode 100644
index 0000000000..0129a7515c
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1c.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column flex container with flexible length flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 150px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    flex-grow: 2;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    flex-grow: 1;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    flex-grow: 1;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    flex-grow: 2;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1d.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1d.html
new file mode 100644
index 0000000000..12730915c9
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1d.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column-reverse flex container with flexible length flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 150px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+    flex-grow: 2;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    flex-grow: 1;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    flex-grow: 1;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    flex-grow: 2;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1e.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1e.html
new file mode 100644
index 0000000000..960a342b00
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1e.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with block-size:auto flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+  }
+  header > div {
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    align-self: flex-start;
+  }
+  nav > div {
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    align-self: center;
+  }
+  article > div {
+    block-size: 25px;
+  }
+  footer {
+    background: black;
+    align-self: flex-end;
+  }
+  footer > div {
+    block-size: 50px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1f.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1f.html
new file mode 100644
index 0000000000..93770c5c92
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1f.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with block-size:auto flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+  }
+  footer > div {
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    align-self: flex-start;
+  }
+  article > div {
+    block-size: 25px;
+  }
+  nav {
+    background: yellow;
+    align-self: center;
+  }
+  nav > div {
+    block-size: 25px;
+  }
+  header {
+    background: black;
+    align-self: flex-end;
+  }
+  header > div {
+    block-size: 50px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1g.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1g.html
new file mode 100644
index 0000000000..e8ccb5f4bd
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1g.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 30px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1h.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1h.html
new file mode 100644
index 0000000000..9408f49e3f
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1h.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 30px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1i.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1i.html
new file mode 100644
index 0000000000..7b75ceeca9
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1i.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1j.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1j.html
new file mode 100644
index 0000000000..ba7cd24347
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1j.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2-ref.html
new file mode 100644
index 0000000000..277da6e417
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2-ref.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of multi-line column flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 90px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 60px;
+    position: relative;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    inline-size: 20px;
+  }
+  header {
+    background: cyan;
+    block-size: 50px;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 30px;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    position: absolute;
+    inset-block-start: 25px;
+    inset-inline-start: 35px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 70px;
+  }
+  .border-padding > header, .border-padding > nav, .border-padding > footer {
+    inset-block-start: 5px;
+  }
+  .border-padding > article {
+    inset-block-start: 30px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article style="inset-block-start: 30px"></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article style="inset-block-start: 35px"></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2.html
new file mode 100644
index 0000000000..daca4b2e6d
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-lr-2-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. The block-size of the flex container is made shorter than its flex items.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 90px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    /* Block-size is deliberately made so that the flex items are wrapping into
+       three lines, and each line is 30px wide. */
+    block-size: 60px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    inline-size: 20px;
+  }
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1-ref.html
new file mode 100644
index 0000000000..d5c0093980
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of multi-line column flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .gap {
+    block-size: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    position: relative;
+    inset-inline-start: 5px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    position: relative;
+    inset-inline-start: 10px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1a.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1a.html
new file mode 100644
index 0000000000..828dab446c
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1a.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1b.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1b.html
new file mode 100644
index 0000000000..f4bee1f443
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1b.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1c.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1c.html
new file mode 100644
index 0000000000..a4420b4edf
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1c.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column flex container with flexible length flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 150px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    flex-grow: 2;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    flex-grow: 1;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    flex-grow: 1;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    flex-grow: 2;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1d.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1d.html
new file mode 100644
index 0000000000..675788a24f
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1d.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column-reverse flex container with flexible length flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 150px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+    flex-grow: 2;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    flex-grow: 1;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    flex-grow: 1;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    flex-grow: 2;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1e.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1e.html
new file mode 100644
index 0000000000..e8a63a8892
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1e.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with block-size:auto flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+  }
+  header > div {
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    align-self: flex-start;
+  }
+  nav > div {
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    align-self: center;
+  }
+  article > div {
+    block-size: 25px;
+  }
+  footer {
+    background: black;
+    align-self: flex-end;
+  }
+  footer > div {
+    block-size: 50px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1f.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1f.html
new file mode 100644
index 0000000000..87c9ada1b0
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1f.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with block-size:auto flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+  }
+  footer > div {
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    align-self: flex-start;
+  }
+  article > div {
+    block-size: 25px;
+  }
+  nav {
+    background: yellow;
+    align-self: center;
+  }
+  nav > div {
+    block-size: 25px;
+  }
+  header {
+    background: black;
+    align-self: flex-end;
+  }
+  header > div {
+    block-size: 50px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1g.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1g.html
new file mode 100644
index 0000000000..31bee7d96b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1g.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 30px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1h.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1h.html
new file mode 100644
index 0000000000..5af8aa0903
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1h.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 30px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1i.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1i.html
new file mode 100644
index 0000000000..05fa7143d6
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1i.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1j.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1j.html
new file mode 100644
index 0000000000..862e96e121
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1j.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2-ref.html
new file mode 100644
index 0000000000..543e00eee5
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2-ref.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of multi-line column flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 90px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 60px;
+    position: relative;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    inline-size: 20px;
+  }
+  header {
+    background: cyan;
+    block-size: 50px;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 30px;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    position: absolute;
+    inset-block-start: 25px;
+    inset-inline-start: 35px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 70px;
+  }
+  .border-padding > header, .border-padding > nav, .border-padding > footer {
+    inset-block-start: 5px;
+  }
+  .border-padding > article {
+    inset-block-start: 30px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article style="inset-block-start: 30px"></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article style="inset-block-start: 35px"></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2.html
new file mode 100644
index 0000000000..cdca9383af
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-column-vertical-rl-2-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. The block-size of the flex container is made shorter than its flex items.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 90px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    /* Block-size is deliberately made so that the flex items are wrapping into
+       three lines, and each line is 30px wide. */
+    block-size: 60px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    inline-size: 20px;
+  }
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1-ref.html
new file mode 100644
index 0000000000..852c1947fe
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1-ref.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .line {
+    inline-size: 60px;
+    block-size: 50px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+    float: left;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    float: right;
+  }
+  article {
+    background: yellow;
+    block-size: 40px;
+    float: left;
+    margin-block-start: 5px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    float: right;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <div class="line"><header></header><nav></nav></div>
+        <div style="block-size: 20px"><!-- row-gap --></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1a.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1a.html
new file mode 100644
index 0000000000..893a31d8e4
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1a.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1b.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1b.html
new file mode 100644
index 0000000000..c3d953451c
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1b.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap-reverse;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-end;
+  }
+  nav {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-start;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1c.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1c.html
new file mode 100644
index 0000000000..76ccbaebfe
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1c.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  .multicol {
+    block-size: 30px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1d.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1d.html
new file mode 100644
index 0000000000..4a4d022ed8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1d.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  .multicol {
+    block-size: 30px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap-reverse;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-end;
+  }
+  nav {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-start;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1e.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1e.html
new file mode 100644
index 0000000000..a0c30f3744
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1e.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  .multicol {
+    block-size: 80px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1f.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1f.html
new file mode 100644
index 0000000000..82ab768672
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1f.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  .multicol {
+    block-size: 80px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap-reverse;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-end;
+  }
+  nav {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-start;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-2-ref.html
new file mode 100644
index 0000000000..e6ab0cca4d
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-2-ref.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  .multicol {
+    block-size: 70px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 140px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .line {
+    inline-size: 60px;
+    block-size: 70px;
+  }
+  .with-gap .line {
+    block-size: 60px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+    float: left;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    float: right;
+  }
+  article {
+    background: yellow;
+    block-size: 40px;
+    float: left;
+    margin-block-start: 15px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    float: right;
+    margin-block-start: 20px;
+  }
+  .with-gap article, .with-gap footer {
+    margin-block-start: 10px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <div class="line"><header></header><nav></nav></div>
+        <div style="block-size: 20px"><!-- row-gap --></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-2a.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-2a.html
new file mode 100644
index 0000000000..587171bb34
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-2a.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-2-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+  <style>
+  .multicol {
+    block-size: 70px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 140px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-2b.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-2b.html
new file mode 100644
index 0000000000..602fdd9704
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-2b.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-2-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+  <style>
+  .multicol {
+    block-size: 70px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap-reverse;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 140px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-end;
+  }
+  nav {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-start;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1-ref.html
new file mode 100644
index 0000000000..f982fa8ede
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1-ref.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .line {
+    inline-size: 60px;
+    block-size: 50px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+    float: left;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    float: right;
+  }
+  article {
+    background: yellow;
+    block-size: 40px;
+    float: left;
+    margin-block-start: 5px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    float: right;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <div class="line"><header></header><nav></nav></div>
+        <div style="block-size: 20px"><!-- row-gap --></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1a.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1a.html
new file mode 100644
index 0000000000..c4d1202645
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1a.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1b.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1b.html
new file mode 100644
index 0000000000..bae2ec839a
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1b.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap-reverse;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-end;
+  }
+  nav {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-start;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1c.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1c.html
new file mode 100644
index 0000000000..6e2135b123
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1c.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 30px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1d.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1d.html
new file mode 100644
index 0000000000..daed00e37a
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1d.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 30px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap-reverse;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-end;
+  }
+  nav {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-start;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1e.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1e.html
new file mode 100644
index 0000000000..7dce6e8e39
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1e.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1f.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1f.html
new file mode 100644
index 0000000000..919e9929e9
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1f.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap-reverse;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-end;
+  }
+  nav {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-start;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2-ref.html
new file mode 100644
index 0000000000..0a9cbe6693
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2-ref.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 70px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 140px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .line {
+    inline-size: 60px;
+    block-size: 70px;
+  }
+  .with-gap .line {
+    block-size: 60px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+    float: left;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    float: right;
+  }
+  article {
+    background: yellow;
+    block-size: 40px;
+    float: left;
+    margin-block-start: 15px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    float: right;
+    margin-block-start: 20px;
+  }
+  .with-gap article, .with-gap footer {
+    margin-block-start: 10px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <div class="line"><header></header><nav></nav></div>
+        <div style="block-size: 20px"><!-- row-gap --></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2a.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2a.html
new file mode 100644
index 0000000000..0f179a7d97
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2a.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-vertical-lr-2-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 70px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 140px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2b.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2b.html
new file mode 100644
index 0000000000..70e7fed050
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2b.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-vertical-lr-2-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 70px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap-reverse;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 140px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-end;
+  }
+  nav {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-start;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1-ref.html
new file mode 100644
index 0000000000..ee7733abce
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1-ref.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .line {
+    inline-size: 60px;
+    block-size: 50px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+    float: left;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    float: right;
+  }
+  article {
+    background: yellow;
+    block-size: 40px;
+    float: left;
+    margin-block-start: 5px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    float: right;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <div class="line"><header></header><nav></nav></div>
+        <div style="block-size: 20px"><!-- row-gap --></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1a.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1a.html
new file mode 100644
index 0000000000..e4f176116f
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1a.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1b.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1b.html
new file mode 100644
index 0000000000..2ef258b2ac
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1b.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap-reverse;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-end;
+  }
+  nav {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-start;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1c.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1c.html
new file mode 100644
index 0000000000..86a3464e2e
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1c.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 30px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1d.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1d.html
new file mode 100644
index 0000000000..114b236dc5
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1d.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 30px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap-reverse;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-end;
+  }
+  nav {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-start;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1e.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1e.html
new file mode 100644
index 0000000000..6f68852a65
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1e.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1f.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1f.html
new file mode 100644
index 0000000000..badaa3ce5d
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1f.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap-reverse;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-end;
+  }
+  nav {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-start;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2-ref.html
new file mode 100644
index 0000000000..85b754b4e9
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2-ref.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 70px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 140px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .line {
+    inline-size: 60px;
+    block-size: 70px;
+  }
+  .with-gap .line {
+    block-size: 60px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+    float: left;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    float: right;
+  }
+  article {
+    background: yellow;
+    block-size: 40px;
+    float: left;
+    margin-block-start: 15px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    float: right;
+    margin-block-start: 20px;
+  }
+  .with-gap article, .with-gap footer {
+    margin-block-start: 10px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <div class="line"><header></header><nav></nav></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <div class="line"><header></header><nav></nav></div>
+        <div style="block-size: 20px"><!-- row-gap --></div>
+        <div class="line"><article></article><footer></footer></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2a.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2a.html
new file mode 100644
index 0000000000..8de49ab568
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2a.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-vertical-rl-2-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 70px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 140px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2b.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2b.html
new file mode 100644
index 0000000000..b361f265a2
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2b.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-multi-row-vertical-rl-2-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 70px;
+    inline-size: 200px;
+    column-width: 60px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: wrap-reverse;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 140px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .with-gap {
+    row-gap: 20px;
+    column-gap: 10px;
+  }
+
+  header, nav, article, footer {
+    inline-size: 30px;
+  }
+  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+    inline-size: 25px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-end;
+  }
+  nav {
+    background: yellow;
+    block-size: 40px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-start;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding with-gap">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1-ref.html
new file mode 100644
index 0000000000..17c0956b48
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1-ref.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .gap {
+    block-size: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    position: relative;
+    inset-inline-start: 5px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    position: relative;
+    inset-inline-start: 10px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1a.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1a.html
new file mode 100644
index 0000000000..e753bcc8db
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1a.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1b.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1b.html
new file mode 100644
index 0000000000..cb9d69a8a8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1b.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1c.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1c.html
new file mode 100644
index 0000000000..490fa8c2ee
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1c.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column flex container with flexible length flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 150px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    flex-grow: 2;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    flex-grow: 1;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    flex-grow: 1;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    flex-grow: 2;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1d.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1d.html
new file mode 100644
index 0000000000..93ab363268
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1d.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column-reverse flex container with flexible length flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 150px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+    flex-grow: 2;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    flex-grow: 1;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    flex-grow: 1;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    flex-grow: 2;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1e.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1e.html
new file mode 100644
index 0000000000..96176b4c72
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1e.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with block-size:auto flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+  }
+  header > div {
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    align-self: flex-start;
+  }
+  nav > div {
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    align-self: center;
+  }
+  article > div {
+    block-size: 25px;
+  }
+  footer {
+    background: black;
+    align-self: flex-end;
+  }
+  footer > div {
+    block-size: 50px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1f.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1f.html
new file mode 100644
index 0000000000..f7082184fb
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1f.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with block-size:auto flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+  }
+  footer > div {
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    align-self: flex-start;
+  }
+  article > div {
+    block-size: 25px;
+  }
+  nav {
+    background: yellow;
+    align-self: center;
+  }
+  nav > div {
+    block-size: 25px;
+  }
+  header {
+    background: black;
+    align-self: flex-end;
+  }
+  header > div {
+    block-size: 50px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1g.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1g.html
new file mode 100644
index 0000000000..5b540a8db7
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1g.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  .multicol {
+    block-size: 30px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1h.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1h.html
new file mode 100644
index 0000000000..c4999c5ecf
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1h.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  .multicol {
+    block-size: 30px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1i.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1i.html
new file mode 100644
index 0000000000..fd669b2d4f
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1i.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  .multicol {
+    block-size: 80px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1j.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1j.html
new file mode 100644
index 0000000000..ffc297cfb4
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1j.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  .multicol {
+    block-size: 80px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-2-ref.html
new file mode 100644
index 0000000000..19628eb7fa
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-2-ref.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 85px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .gap {
+    block-size: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    position: relative;
+    inset-inline-start: 5px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    position: relative;
+    inset-inline-start: 10px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-2.html b/layout/reftests/flexbox/pagination/flexbox-single-column-2.html
new file mode 100644
index 0000000000..c637be9bc8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-2.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-2-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. The block-size of the flex container is made shorter than its flex items.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    /* Block-size is deliberately made shorter than all its flex items. */
+    block-size: 85px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-shrink: 0;
+  }
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-3-ref.html
new file mode 100644
index 0000000000..656b43db99
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-3-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+    padding-block: 15px;
+  }
+  .flexContainer {
+    background: gray;
+    box-decoration-break: clone;
+  }
+  .gap {
+    block-size: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    position: relative;
+    inset-inline-start: 5px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    position: relative;
+    inset-inline-start: 10px;
+  }
+  </style>
+
+  <body>
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-3a.html b/layout/reftests/flexbox/pagination/flexbox-single-column-3a.html
new file mode 100644
index 0000000000..46ee650173
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-3a.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-3-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, row-gap, and box-decoration-break:clone.">
+
+  <style>
+  .multicol {
+    block-size: 80px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    border: 0 solid white;
+    border-block-width: 15px;
+    box-decoration-break: clone;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-3b.html b/layout/reftests/flexbox/pagination/flexbox-single-column-3b.html
new file mode 100644
index 0000000000..a8ec6511a3
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-3b.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-3-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, row-gap, and box-decoration-break:clone.">
+
+  <style>
+  .multicol {
+    block-size: 80px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column-reverse;
+    background: gray;
+    border: 0 solid white;
+    border-block-width: 15px;
+    box-decoration-break: clone;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-4-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-4-ref.html
new file mode 100644
index 0000000000..f390e7d7ba
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-4-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html class="reftest-paged">
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container in print context</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  @page { size:5in 3in; margin:0.5in; }
+
+  html, body {
+    font-size: 12pt; margin: 0;
+  }
+
+  .flexContainer {
+    display: block;
+    background: gray;
+    border: 0.25in solid lightgray;
+  }
+  article {
+    background: yellow;
+    block-size: 2in;
+  }
+  </style>
+
+  <body>
+    <div style="block-size: 0.25in; background: lightblue"></div>
+    <div class="flexContainer">
+      <div class="flexContainer">
+        <div class="flexContainer">
+          <!-- <article> is expected to have 1 inch in the first page and 1 inch
+               in the second page.  -->
+          <article></article>
+        </div>
+      </div>
+    </div>
+    <div style="block-size: 0.25in; background: lightblue"></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-4.html b/layout/reftests/flexbox/pagination/flexbox-single-column-4.html
new file mode 100644
index 0000000000..54d45a73ef
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-4.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html class="reftest-paged">
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of nested block-size:auto flex containers with a tall flex item in print context, not top-of-page</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-4-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of a tall flex item in nested block-size:auto single-line column flex containers in print context.">
+
+  <style>
+  @page { size:5in 3in; margin:0.5in; }
+
+  html, body {
+    font-size: 12pt; margin: 0;
+  }
+
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    border: 0.25in solid lightgray;
+  }
+  article {
+    background: yellow;
+    block-size: 2in;
+  }
+  </style>
+
+  <body>
+    <div style="block-size: 0.25in; background: lightblue"></div>
+    <div class="flexContainer">
+      <div class="flexContainer">
+        <div class="flexContainer">
+          <!-- <article> is expected to have 1 inch in the first page and 1 inch
+               in the second page.  -->
+          <article></article>
+        </div>
+      </div>
+    </div>
+    <div style="block-size: 0.25in; background: lightblue"></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-5-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-5-ref.html
new file mode 100644
index 0000000000..b38576798a
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-5-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of block-size:auto single-line column flex container in a zero block-size multicol</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  .multicol {
+    column-count: 2;
+    block-size: 0;
+    border: 1px solid black;
+    margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+  }
+
+  .flexContainer {
+    display: block;
+    padding: 1px;
+  }
+
+  .boxDecorationBreak {
+    padding: 5px;
+    box-decoration-break: clone;
+  }
+
+  </style>
+
+  <body>
+    <!-- Basic one with padding on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div>abc</div><div>def</div>
+      </div>
+    </div>
+
+    <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer boxDecorationBreak">
+        <div>abc</div><div>def</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-5.html b/layout/reftests/flexbox/pagination/flexbox-single-column-5.html
new file mode 100644
index 0000000000..ea2bc11222
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-5.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container in a zero block-size multicol</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-5-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of flex containers can make progress in a zero block-size multicol.">
+
+  <style>
+  .multicol {
+    column-count: 2;
+    block-size: 0;
+    border: 1px solid black;
+    margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+  }
+
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    padding: 1px;
+  }
+
+  .boxDecorationBreak {
+    padding: 5px;
+    box-decoration-break: clone;
+  }
+
+  </style>
+
+  <body>
+    <!-- Basic one with padding on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div>abc</div><div>def</div>
+      </div>
+    </div>
+
+    <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer boxDecorationBreak">
+        <div>abc</div><div>def</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-6-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-6-ref.html
new file mode 100644
index 0000000000..e929a9a0d8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-6-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of a fixed block-size single-line column flex container and a fixed block-size flex item that has overflows</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: block;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    /* Block-size is deliberately made shorter than its flex items. */
+    block-size: 40px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  article {
+    inline-size: 30px;
+    /* Block-size is deliberately made shorter than its <div> child. */
+    block-size: 70px;
+    background: cyan;
+  }
+  article > div {
+    inline-size: 20px;
+    block-size: 140px;
+    background: magenta;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <article><div></div></article>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <article><div></div></article>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <article><div></div></article>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <article><div></div></article>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-6.html b/layout/reftests/flexbox/pagination/flexbox-single-column-6.html
new file mode 100644
index 0000000000..366a7670a7
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-6.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of a fixed block-size single-line column flex container and a fixed block-size flex item that has overflows</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-6-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of a fixed block-size flex item that has overflows in a fixed block-size single-line column flex container.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    /* Block-size is deliberately made shorter than its flex items. */
+    block-size: 40px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  article {
+    inline-size: 30px;
+    /* Block-size is deliberately made shorter than its <div> child. */
+    block-size: 70px;
+    background: cyan;
+  }
+  article > div {
+    inline-size: 20px;
+    block-size: 140px;
+    background: magenta;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <article><div></div></article>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <article><div></div></article>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <article><div></div></article>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <article><div></div></article>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1-ref.html
new file mode 100644
index 0000000000..a2884afe0b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .gap {
+    block-size: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    position: relative;
+    inset-inline-start: 5px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    position: relative;
+    inset-inline-start: 10px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1a.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1a.html
new file mode 100644
index 0000000000..8e2b234518
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1a.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1b.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1b.html
new file mode 100644
index 0000000000..32d55664ed
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1b.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1c.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1c.html
new file mode 100644
index 0000000000..4b14b7a58c
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1c.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column flex container with flexible length flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 150px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    flex-grow: 2;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    flex-grow: 1;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    flex-grow: 1;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    flex-grow: 2;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1d.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1d.html
new file mode 100644
index 0000000000..82cfc64f47
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1d.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column-reverse flex container with flexible length flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 150px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+    flex-grow: 2;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    flex-grow: 1;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    flex-grow: 1;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    flex-grow: 2;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1e.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1e.html
new file mode 100644
index 0000000000..fbb208b2ac
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1e.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with block-size:auto flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+  }
+  header > div {
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    align-self: flex-start;
+  }
+  nav > div {
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    align-self: center;
+  }
+  article > div {
+    block-size: 25px;
+  }
+  footer {
+    background: black;
+    align-self: flex-end;
+  }
+  footer > div {
+    block-size: 50px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1f.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1f.html
new file mode 100644
index 0000000000..04dff8815b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1f.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with block-size:auto flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+  }
+  footer > div {
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    align-self: flex-start;
+  }
+  article > div {
+    block-size: 25px;
+  }
+  nav {
+    background: yellow;
+    align-self: center;
+  }
+  nav > div {
+    block-size: 25px;
+  }
+  header {
+    background: black;
+    align-self: flex-end;
+  }
+  header > div {
+    block-size: 50px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1g.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1g.html
new file mode 100644
index 0000000000..fa60c2da31
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1g.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 30px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1h.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1h.html
new file mode 100644
index 0000000000..f07619eea8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1h.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 30px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1i.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1i.html
new file mode 100644
index 0000000000..510016392a
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1i.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1j.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1j.html
new file mode 100644
index 0000000000..dff871d161
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1j.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2-ref.html
new file mode 100644
index 0000000000..a65e6d42e2
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2-ref.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 85px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .gap {
+    block-size: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    position: relative;
+    inset-inline-start: 5px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    position: relative;
+    inset-inline-start: 10px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2.html
new file mode 100644
index 0000000000..3bfa127e2f
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-lr-2-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. The block-size of the flex container is made shorter than its flex items.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    /* Block-size is deliberately made shorter than all its flex items. */
+    block-size: 85px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-shrink: 0;
+  }
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3-ref.html
new file mode 100644
index 0000000000..fe6ca715c6
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3-ref.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+    padding-block: 15px;
+  }
+  .flexContainer {
+    background: gray;
+    box-decoration-break: clone;
+  }
+  .gap {
+    block-size: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    position: relative;
+    inset-inline-start: 5px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    position: relative;
+    inset-inline-start: 10px;
+  }
+  </style>
+
+  <body>
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3a.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3a.html
new file mode 100644
index 0000000000..04c459a045
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3a.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-lr-3-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, row-gap, and box-decoration-break:clone.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    border: 0 solid white;
+    border-block-width: 15px;
+    box-decoration-break: clone;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3b.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3b.html
new file mode 100644
index 0000000000..0e9a2a40ec
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3b.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-lr-3-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, row-gap, and box-decoration-break:clone.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column-reverse;
+    background: gray;
+    border: 0 solid white;
+    border-block-width: 15px;
+    box-decoration-break: clone;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4-ref.html
new file mode 100644
index 0000000000..c6e933cb50
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html class="reftest-paged">
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container in print context</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  @page { size:5in 3in; margin:0.5in; }
+
+  html, body {
+    font-size: 12pt; margin: 0;
+  }
+
+  .flexContainer {
+    display: block;
+    background: gray;
+    border: 0.25in solid lightgray;
+  }
+  article {
+    background: yellow;
+    block-size: 2in;
+  }
+  </style>
+
+  <body>
+    <div style="block-size: 0.25in; background: lightblue"></div>
+    <div class="flexContainer">
+      <div class="flexContainer">
+        <div class="flexContainer">
+          <!-- <article> is expected to have 1 inch in the first page and 1 inch
+               in the second page.  -->
+          <article></article>
+        </div>
+      </div>
+    </div>
+    <div style="block-size: 0.25in; background: lightblue"></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4.html
new file mode 100644
index 0000000000..6b9e964736
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html class="reftest-paged">
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of nested block-size:auto flex containers with a tall flex item in print context, not top-of-page</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-lr-4-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of a tall flex item in nested block-size:auto single-line column flex containers in print context.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  @page { size:5in 3in; margin:0.5in; }
+
+  html, body {
+    font-size: 12pt; margin: 0;
+  }
+
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    border: 0.25in solid lightgray;
+  }
+  article {
+    background: yellow;
+    block-size: 2in;
+  }
+  </style>
+
+  <body>
+    <div style="block-size: 0.25in; background: lightblue"></div>
+    <div class="flexContainer">
+      <div class="flexContainer">
+        <div class="flexContainer">
+          <!-- <article> is expected to have 1 inch in the first page and 1 inch
+               in the second page.  -->
+          <article></article>
+        </div>
+      </div>
+    </div>
+    <div style="block-size: 0.25in; background: lightblue"></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5-ref.html
new file mode 100644
index 0000000000..93407a8a58
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of block-size:auto single-line column flex container in a zero block-size multicol</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    column-count: 2;
+    block-size: 0;
+    border: 1px solid black;
+    margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+  }
+
+  .flexContainer {
+    display: block;
+    padding: 1px;
+  }
+
+  .boxDecorationBreak {
+    padding: 5px;
+    box-decoration-break: clone;
+  }
+
+  </style>
+
+  <body>
+    <!-- Basic one with padding on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div>abc</div><div>def</div>
+      </div>
+    </div>
+
+    <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer boxDecorationBreak">
+        <div>abc</div><div>def</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5.html
new file mode 100644
index 0000000000..abece966b0
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container in a zero block-size multicol</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-lr-5-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of flex containers can make progress in a zero block-size multicol.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    column-count: 2;
+    block-size: 0;
+    border: 1px solid black;
+    margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+  }
+
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    padding: 1px;
+  }
+
+  .boxDecorationBreak {
+    padding: 5px;
+    box-decoration-break: clone;
+  }
+
+  </style>
+
+  <body>
+    <!-- Basic one with padding on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div>abc</div><div>def</div>
+      </div>
+    </div>
+
+    <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer boxDecorationBreak">
+        <div>abc</div><div>def</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6-ref.html
new file mode 100644
index 0000000000..7ac7d3b6b0
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6-ref.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of a fixed block-size single-line column flex container and a fixed block-size flex item that has overflows</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: block;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    /* Block-size is deliberately made shorter than its flex items. */
+    block-size: 40px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  article {
+    inline-size: 30px;
+    /* Block-size is deliberately made shorter than its <div> child. */
+    block-size: 70px;
+    background: cyan;
+  }
+  article > div {
+    inline-size: 20px;
+    block-size: 140px;
+    background: magenta;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <article><div></div></article>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <article><div></div></article>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <article><div></div></article>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <article><div></div></article>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6.html
new file mode 100644
index 0000000000..4467324393
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of a fixed block-size single-line column flex container and a fixed block-size flex item that has overflows</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-lr-6-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of a fixed block-size flex item that has overflows in a fixed block-size single-line column flex container.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    /* Block-size is deliberately made shorter than its flex items. */
+    block-size: 40px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  article {
+    inline-size: 30px;
+    /* Block-size is deliberately made shorter than its <div> child. */
+    block-size: 70px;
+    background: cyan;
+  }
+  article > div {
+    inline-size: 20px;
+    block-size: 140px;
+    background: magenta;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <article><div></div></article>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <article><div></div></article>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <article><div></div></article>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <article><div></div></article>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1-ref.html
new file mode 100644
index 0000000000..32b3f252a7
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .gap {
+    block-size: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    position: relative;
+    inset-inline-start: 5px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    position: relative;
+    inset-inline-start: 10px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1a.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1a.html
new file mode 100644
index 0000000000..e2f0d449d5
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1a.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1b.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1b.html
new file mode 100644
index 0000000000..23f2f64e55
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1b.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1c.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1c.html
new file mode 100644
index 0000000000..02f81d5ff8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1c.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column flex container with flexible length flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 150px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    flex-grow: 2;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    flex-grow: 1;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    flex-grow: 1;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    flex-grow: 2;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1d.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1d.html
new file mode 100644
index 0000000000..19f5ba3355
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1d.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column-reverse flex container with flexible length flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 150px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+    flex-grow: 2;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    flex-grow: 1;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    flex-grow: 1;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    flex-grow: 2;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1e.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1e.html
new file mode 100644
index 0000000000..dc2f8b1f81
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1e.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with block-size:auto flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+  }
+  header > div {
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    align-self: flex-start;
+  }
+  nav > div {
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    align-self: center;
+  }
+  article > div {
+    block-size: 25px;
+  }
+  footer {
+    background: black;
+    align-self: flex-end;
+  }
+  footer > div {
+    block-size: 50px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1f.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1f.html
new file mode 100644
index 0000000000..4801203c5e
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1f.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with block-size:auto flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+  }
+  footer > div {
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    align-self: flex-start;
+  }
+  article > div {
+    block-size: 25px;
+  }
+  nav {
+    background: yellow;
+    align-self: center;
+  }
+  nav > div {
+    block-size: 25px;
+  }
+  header {
+    background: black;
+    align-self: flex-end;
+  }
+  header > div {
+    block-size: 50px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1g.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1g.html
new file mode 100644
index 0000000000..94d5f4442b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1g.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 30px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1h.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1h.html
new file mode 100644
index 0000000000..56b7b0a434
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1h.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 30px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1i.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1i.html
new file mode 100644
index 0000000000..3b2e82693b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1i.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1j.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1j.html
new file mode 100644
index 0000000000..d551e539d8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1j.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2-ref.html
new file mode 100644
index 0000000000..4131706f62
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2-ref.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 85px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .gap {
+    block-size: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    position: relative;
+    inset-inline-start: 5px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    position: relative;
+    inset-inline-start: 10px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2.html
new file mode 100644
index 0000000000..1306a1f7fc
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-rl-2-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. The block-size of the flex container is made shorter than its flex items.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    /* Block-size is deliberately made shorter than all its flex items. */
+    block-size: 85px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-shrink: 0;
+  }
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3-ref.html
new file mode 100644
index 0000000000..610f8b2359
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3-ref.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+    padding-block: 15px;
+  }
+  .flexContainer {
+    background: gray;
+    box-decoration-break: clone;
+  }
+  .gap {
+    block-size: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    position: relative;
+    inset-inline-start: 5px;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    position: relative;
+    inset-inline-start: 10px;
+  }
+  </style>
+
+  <body>
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3a.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3a.html
new file mode 100644
index 0000000000..5055c7d3c9
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3a.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line column flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-rl-3-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, row-gap, and box-decoration-break:clone.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    border: 0 solid white;
+    border-block-width: 15px;
+    box-decoration-break: clone;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header {
+    background: cyan;
+    block-size: 50px;
+  }
+  nav, article, footer {
+    inline-size: 30px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3b.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3b.html
new file mode 100644
index 0000000000..ff768b0d0e
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3b.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line column-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-rl-3-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, row-gap, and box-decoration-break:clone.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column-reverse;
+    background: gray;
+    border: 0 solid white;
+    border-block-width: 15px;
+    box-decoration-break: clone;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer {
+    background: cyan;
+    block-size: 50px;
+  }
+  article, nav, header {
+    inline-size: 30px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 25px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 50px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with row-gap. -->
+    <div class="multicol">
+      <div class="flexContainer" style="row-gap: 5px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4-ref.html
new file mode 100644
index 0000000000..7f2b80d28d
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html class="reftest-paged">
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container in print context</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  @page { size:5in 3in; margin:0.5in; }
+
+  html, body {
+    font-size: 12pt; margin: 0;
+  }
+
+  .flexContainer {
+    display: block;
+    background: gray;
+    border: 0.25in solid lightgray;
+  }
+  article {
+    background: yellow;
+    block-size: 2in;
+  }
+  </style>
+
+  <body>
+    <div style="block-size: 0.25in; background: lightblue"></div>
+    <div class="flexContainer">
+      <div class="flexContainer">
+        <div class="flexContainer">
+          <!-- <article> is expected to have 1 inch in the first page and 1 inch
+               in the second page.  -->
+          <article></article>
+        </div>
+      </div>
+    </div>
+    <div style="block-size: 0.25in; background: lightblue"></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4.html
new file mode 100644
index 0000000000..9fbdb6e0cd
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html class="reftest-paged">
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of nested block-size:auto flex containers with a tall flex item in print context, not top-of-page</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-rl-4-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of a tall flex item in nested block-size:auto single-line column flex containers in print context.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  @page { size:5in 3in; margin:0.5in; }
+
+  html, body {
+    font-size: 12pt; margin: 0;
+  }
+
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    border: 0.25in solid lightgray;
+  }
+  article {
+    background: yellow;
+    block-size: 2in;
+  }
+  </style>
+
+  <body>
+    <div style="block-size: 0.25in; background: lightblue"></div>
+    <div class="flexContainer">
+      <div class="flexContainer">
+        <div class="flexContainer">
+          <!-- <article> is expected to have 1 inch in the first page and 1 inch
+               in the second page.  -->
+          <article></article>
+        </div>
+      </div>
+    </div>
+    <div style="block-size: 0.25in; background: lightblue"></div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5-ref.html
new file mode 100644
index 0000000000..ab12ac5cf8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of block-size:auto single-line column flex container in a zero block-size multicol</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    column-count: 2;
+    block-size: 0;
+    border: 1px solid black;
+    margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+  }
+
+  .flexContainer {
+    display: block;
+    padding: 1px;
+  }
+
+  .boxDecorationBreak {
+    padding: 5px;
+    box-decoration-break: clone;
+  }
+
+  </style>
+
+  <body>
+    <!-- Basic one with padding on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div>abc</div><div>def</div>
+      </div>
+    </div>
+
+    <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer boxDecorationBreak">
+        <div>abc</div><div>def</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5.html
new file mode 100644
index 0000000000..5ec4c440de
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container in a zero block-size multicol</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-rl-5-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of flex containers can make progress in a zero block-size multicol.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    column-count: 2;
+    block-size: 0;
+    border: 1px solid black;
+    margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+  }
+
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    padding: 1px;
+  }
+
+  .boxDecorationBreak {
+    padding: 5px;
+    box-decoration-break: clone;
+  }
+
+  </style>
+
+  <body>
+    <!-- Basic one with padding on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div>abc</div><div>def</div>
+      </div>
+    </div>
+
+    <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer boxDecorationBreak">
+        <div>abc</div><div>def</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6-ref.html
new file mode 100644
index 0000000000..163d3393b2
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6-ref.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of a fixed block-size single-line column flex container and a fixed block-size flex item that has overflows</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: block;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    /* Block-size is deliberately made shorter than its flex items. */
+    block-size: 40px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  article {
+    inline-size: 30px;
+    /* Block-size is deliberately made shorter than its <div> child. */
+    block-size: 70px;
+    background: cyan;
+  }
+  article > div {
+    inline-size: 20px;
+    block-size: 140px;
+    background: magenta;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <article><div></div></article>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <article><div></div></article>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <article><div></div></article>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <article><div></div></article>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6.html
new file mode 100644
index 0000000000..8a3706050b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of a fixed block-size single-line column flex container and a fixed block-size flex item that has overflows</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-column-vertical-rl-6-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of a fixed block-size flex item that has overflows in a fixed block-size single-line column flex container.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 190px;
+    column-width: 40px;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    /* Block-size is deliberately made shorter than its flex items. */
+    block-size: 40px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  article {
+    inline-size: 30px;
+    /* Block-size is deliberately made shorter than its <div> child. */
+    block-size: 70px;
+    background: cyan;
+  }
+  article > div {
+    inline-size: 20px;
+    block-size: 140px;
+    background: magenta;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <article><div></div></article>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <article><div></div></article>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <article><div></div></article>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <article><div></div></article>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1-ref.html
new file mode 100644
index 0000000000..6ec3a56de4
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1-ref.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 100px;
+    position: relative;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .gap {
+    inline-size: 4px;
+    block-size: 100%;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    inline-size: 25px;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+    position: absolute;
+    inset-block-start: 0px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    position: absolute;
+    inset-block-start: 0px;
+    inset-inline-start: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    position: absolute;
+    inset-block-start: 25px;
+    inset-inline-start: 50px;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    position: absolute;
+    inset-block-start: 25px;
+    inset-inline-start: 75px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <!-- Adjust top to simulate padding. -->
+        <header style="inset-block-start: 5px"></header><nav style="inset-block-start: 5px"></nav>
+        <article style="inset-block-start: 30px"></article><footer style="inset-block-start: 30px"></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header style="inline-size: 22px; inset-block-start: 5px"></header>
+        <nav style="inline-size: 22px; inset-block-start: 5px; inset-inline-start: 26px"></nav>
+        <article style="inline-size: 22px; inset-block-start: 30px; inset-inline-start: 52px;"></article>
+        <footer style="inline-size: 22px; inset-block-start: 30px; inset-inline-start: 78px;"></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1a.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1a.html
new file mode 100644
index 0000000000..7b46bb1a87
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1a.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1b.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1b.html
new file mode 100644
index 0000000000..54e77b913b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1b.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer, article, nav, header {
+    flex-grow: 1;
+  }
+  footer {
+    background: cyan;
+    block-size: 100px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1c.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1c.html
new file mode 100644
index 0000000000..d1f1c5f2f7
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1c.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with block-size:auto flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  header {
+    background: cyan;
+  }
+  header > div {
+    block-size: 100px;
+  }
+  nav {
+    background: magenta;
+    align-self: flex-start;
+  }
+  nav > div {
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    align-self: center;
+  }
+  article > div {
+    block-size: 50px;
+  }
+  footer {
+    background: black;
+    align-self: flex-end;
+  }
+  footer > div {
+    block-size: 75px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1d.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1d.html
new file mode 100644
index 0000000000..6da222694c
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1d.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with block-size:auto flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  footer {
+    background: cyan;
+  }
+  footer > div {
+    block-size: 100px;
+  }
+  article {
+    background: magenta;
+    align-self: flex-start;
+  }
+  article > div {
+    block-size: 25px;
+  }
+  nav {
+    background: yellow;
+    align-self: center;
+  }
+  nav > div {
+    block-size: 50px;
+  }
+  header {
+    background: black;
+    align-self: flex-end;
+  }
+  header > div {
+    block-size: 75px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1e.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1e.html
new file mode 100644
index 0000000000..4e31713f60
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1e.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap.  Also use a script to enlarge multicol block-size.">
+
+  <style>
+  .multicol {
+    block-size: 30px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1f.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1f.html
new file mode 100644
index 0000000000..817139d2e8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1f.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  .multicol {
+    block-size: 30px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer, article, nav, header {
+    flex-grow: 1;
+  }
+  footer {
+    background: cyan;
+    block-size: 100px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1g.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1g.html
new file mode 100644
index 0000000000..428efa2948
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1g.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap.  Also use a script to shrink multicol block-size.">
+
+  <style>
+  .multicol {
+    block-size: 80px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1h.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1h.html
new file mode 100644
index 0000000000..f19aa98d79
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1h.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  .multicol {
+    block-size: 80px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer, article, nav, header {
+    flex-grow: 1;
+  }
+  footer {
+    background: cyan;
+    block-size: 100px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-2-ref.html
new file mode 100644
index 0000000000..a18b1de965
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-2-ref.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 80px;
+    position: relative;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .gap {
+    inline-size: 4px;
+    block-size: 100%;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    inline-size: 25px;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+    position: absolute;
+    inset-block-start: 0px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    position: absolute;
+    inset-block-start: 0px;
+    inset-inline-start: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    position: absolute;
+    inset-block-start: 15px;
+    inset-inline-start: 50px;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    position: absolute;
+    inset-block-start: 5px;
+    inset-inline-start: 75px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <!-- Adjust top to simulate padding. -->
+        <header style="inset-block-start: 5px"></header><nav style="inset-block-start: 5px"></nav>
+        <article style="inset-block-start: 20px"></article><footer style="inset-block-start: 10px"></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header style="inline-size: 22px; inset-block-start: 5px"></header>
+        <nav style="inline-size: 22px; inset-block-start: 5px; inset-inline-start: 26px"></nav>
+        <article style="inline-size: 22px; inset-block-start: 20px; inset-inline-start: 52px;"></article>
+        <footer style="inline-size: 22px; inset-block-start: 10px; inset-inline-start: 78px;"></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-2.html b/layout/reftests/flexbox/pagination/flexbox-single-row-2.html
new file mode 100644
index 0000000000..b114f96af2
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-2.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-2-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. The block-size of the flex container is made shorter than <header>.">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    /* Block-size is deliberately made shorter than <header>. */
+    block-size: 80px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-3-ref.html
new file mode 100644
index 0000000000..608b8670e3
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-3-ref.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+    padding-block: 15px;
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid white;
+    block-size: 100px;
+    position: relative;
+  }
+  .gap {
+    inline-size: 4px;
+    block-size: 100%;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    inline-size: 25px;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+    position: absolute;
+    inset-block-start: 0px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    position: absolute;
+    inset-block-start: 0px;
+    inset-inline-start: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    position: absolute;
+    inset-block-start: 25px;
+    inset-inline-start: 50px;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    position: absolute;
+    inset-block-start: 25px;
+    inset-inline-start: 75px;
+  }
+  </style>
+
+  <body>
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header style="inline-size: 22px"></header>
+        <nav style="inline-size: 22px; inset-inline-start: 26px"></nav>
+        <article style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 52px;"></article>
+        <footer style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 78px;"></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-3a.html b/layout/reftests/flexbox/pagination/flexbox-single-row-3a.html
new file mode 100644
index 0000000000..0fced5023a
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-3a.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-3-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, column-gap, and box-decoration-break:clone.">
+
+  <style>
+  .multicol {
+    block-size: 80px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    background: gray;
+    border: 0 solid white;
+    border-block-width: 15px;
+    box-decoration-break: clone;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-3b.html b/layout/reftests/flexbox/pagination/flexbox-single-row-3b.html
new file mode 100644
index 0000000000..85bb663fa6
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-3b.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-3-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, column-gap, and box-decoration-break:clone.">
+
+  <style>
+  .multicol {
+    block-size: 80px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row-reverse;
+    background: gray;
+    border: 0 solid white;
+    border-block-width: 15px;
+    box-decoration-break: clone;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  footer {
+    background: cyan;
+    block-size: 100px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-4-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-4-ref.html
new file mode 100644
index 0000000000..ebc6d6aab8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-4-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of block-size:auto single-line row flex container in a zero block-size multicol</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  .multicol {
+    column-count: 2;
+    block-size: 0;
+    border: 1px solid black;
+    margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+  }
+
+  .flexContainer {
+    display: block;
+    padding: 1px;
+  }
+
+  .boxDecorationBreak {
+    padding: 5px;
+    box-decoration-break: clone;
+  }
+
+  </style>
+
+  <body>
+    <!-- Basic one with padding on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div>abcdef</div>
+      </div>
+    </div>
+
+    <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer boxDecorationBreak">
+        <div>abcdef</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-4.html b/layout/reftests/flexbox/pagination/flexbox-single-row-4.html
new file mode 100644
index 0000000000..9377d31bd2
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-4.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container in a zero block-size multicol</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-4-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of flex containers can make progress in a zero block-size multicol.">
+
+  <style>
+  .multicol {
+    column-count: 2;
+    block-size: 0;
+    border: 1px solid black;
+    margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+  }
+
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    padding: 1px;
+  }
+
+  .boxDecorationBreak {
+    padding: 5px;
+    box-decoration-break: clone;
+  }
+
+  </style>
+
+  <body>
+    <!-- Basic one with padding on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div>abc</div><div>def</div>
+      </div>
+    </div>
+
+    <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer boxDecorationBreak">
+        <div>abc</div><div>def</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1-ref.html
new file mode 100644
index 0000000000..1245878626
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1-ref.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 100px;
+    position: relative;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .gap {
+    inline-size: 4px;
+    block-size: 100%;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    inline-size: 25px;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+    position: absolute;
+    inset-block-start: 0px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    position: absolute;
+    inset-block-start: 0px;
+    inset-inline-start: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    position: absolute;
+    inset-block-start: 25px;
+    inset-inline-start: 50px;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    position: absolute;
+    inset-block-start: 25px;
+    inset-inline-start: 75px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <!-- Adjust top to simulate padding. -->
+        <header style="inset-block-start: 5px"></header><nav style="inset-block-start: 5px"></nav>
+        <article style="inset-block-start: 30px"></article><footer style="inset-block-start: 30px"></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header style="inline-size: 22px; inset-block-start: 5px"></header>
+        <nav style="inline-size: 22px; inset-block-start: 5px; inset-inline-start: 26px"></nav>
+        <article style="inline-size: 22px; inset-block-start: 30px; inset-inline-start: 52px;"></article>
+        <footer style="inline-size: 22px; inset-block-start: 30px; inset-inline-start: 78px;"></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1a.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1a.html
new file mode 100644
index 0000000000..d217e40a79
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1a.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1b.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1b.html
new file mode 100644
index 0000000000..36606eb9c2
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1b.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer, article, nav, header {
+    flex-grow: 1;
+  }
+  footer {
+    background: cyan;
+    block-size: 100px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1c.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1c.html
new file mode 100644
index 0000000000..2d15eec1a3
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1c.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with block-size:auto flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  header {
+    background: cyan;
+  }
+  header > div {
+    block-size: 100px;
+  }
+  nav {
+    background: magenta;
+    align-self: flex-start;
+  }
+  nav > div {
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    align-self: center;
+  }
+  article > div {
+    block-size: 50px;
+  }
+  footer {
+    background: black;
+    align-self: flex-end;
+  }
+  footer > div {
+    block-size: 75px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1d.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1d.html
new file mode 100644
index 0000000000..342adad6f5
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1d.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with block-size:auto flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  footer {
+    background: cyan;
+  }
+  footer > div {
+    block-size: 100px;
+  }
+  article {
+    background: magenta;
+    align-self: flex-start;
+  }
+  article > div {
+    block-size: 25px;
+  }
+  nav {
+    background: yellow;
+    align-self: center;
+  }
+  nav > div {
+    block-size: 50px;
+  }
+  header {
+    background: black;
+    align-self: flex-end;
+  }
+  header > div {
+    block-size: 75px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1e.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1e.html
new file mode 100644
index 0000000000..3d0264a80c
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1e.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap.  Also use a script to enlarge multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 30px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1f.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1f.html
new file mode 100644
index 0000000000..643264e68e
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1f.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 30px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer, article, nav, header {
+    flex-grow: 1;
+  }
+  footer {
+    background: cyan;
+    block-size: 100px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1g.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1g.html
new file mode 100644
index 0000000000..a29456fbe0
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1g.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap.  Also use a script to shrink multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1h.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1h.html
new file mode 100644
index 0000000000..7773a72a77
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1h.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer, article, nav, header {
+    flex-grow: 1;
+  }
+  footer {
+    background: cyan;
+    block-size: 100px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2-ref.html
new file mode 100644
index 0000000000..e7f573a0c8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2-ref.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 80px;
+    position: relative;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .gap {
+    inline-size: 4px;
+    block-size: 100%;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    inline-size: 25px;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+    position: absolute;
+    inset-block-start: 0px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    position: absolute;
+    inset-block-start: 0px;
+    inset-inline-start: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    position: absolute;
+    inset-block-start: 15px;
+    inset-inline-start: 50px;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    position: absolute;
+    inset-block-start: 5px;
+    inset-inline-start: 75px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <!-- Adjust top to simulate padding. -->
+        <header style="inset-block-start: 5px"></header><nav style="inset-block-start: 5px"></nav>
+        <article style="inset-block-start: 20px"></article><footer style="inset-block-start: 10px"></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header style="inline-size: 22px; inset-block-start: 5px"></header>
+        <nav style="inline-size: 22px; inset-block-start: 5px; inset-inline-start: 26px"></nav>
+        <article style="inline-size: 22px; inset-block-start: 20px; inset-inline-start: 52px;"></article>
+        <footer style="inline-size: 22px; inset-block-start: 10px; inset-inline-start: 78px;"></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2.html
new file mode 100644
index 0000000000..3630cc9115
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-lr-2-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. The block-size of the flex container is made shorter than <header>.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    /* Block-size is deliberately made shorter than <header>. */
+    block-size: 80px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3-ref.html
new file mode 100644
index 0000000000..93e9e832a8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3-ref.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+    padding-block: 15px;
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid white;
+    block-size: 100px;
+    position: relative;
+  }
+  .gap {
+    inline-size: 4px;
+    block-size: 100%;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    inline-size: 25px;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+    position: absolute;
+    inset-block-start: 0px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    position: absolute;
+    inset-block-start: 0px;
+    inset-inline-start: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    position: absolute;
+    inset-block-start: 25px;
+    inset-inline-start: 50px;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    position: absolute;
+    inset-block-start: 25px;
+    inset-inline-start: 75px;
+  }
+  </style>
+
+  <body>
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header style="inline-size: 22px"></header>
+        <nav style="inline-size: 22px; inset-inline-start: 26px"></nav>
+        <article style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 52px;"></article>
+        <footer style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 78px;"></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3a.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3a.html
new file mode 100644
index 0000000000..5fc9c58f7e
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3a.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-lr-3-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, column-gap, and box-decoration-break:clone.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    background: gray;
+    border: 0 solid white;
+    border-block-width: 15px;
+    box-decoration-break: clone;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3b.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3b.html
new file mode 100644
index 0000000000..e4f7adca3e
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3b.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-lr-3-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, column-gap, and box-decoration-break:clone.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row-reverse;
+    background: gray;
+    border: 0 solid white;
+    border-block-width: 15px;
+    box-decoration-break: clone;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  footer {
+    background: cyan;
+    block-size: 100px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4-ref.html
new file mode 100644
index 0000000000..8da3eb8c4e
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of block-size:auto single-line row flex container in a zero block-size multicol</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    column-count: 2;
+    block-size: 0;
+    border: 1px solid black;
+    margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+  }
+
+  .flexContainer {
+    display: block;
+    padding: 1px;
+  }
+
+  .boxDecorationBreak {
+    padding: 5px;
+    box-decoration-break: clone;
+  }
+
+  </style>
+
+  <body>
+    <!-- Basic one with padding on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div>abcdef</div>
+      </div>
+    </div>
+
+    <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer boxDecorationBreak">
+        <div>abcdef</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4.html
new file mode 100644
index 0000000000..bddacb191c
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container in a zero block-size multicol</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-lr-4-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of flex containers can make progress in a zero block-size multicol.">
+
+  <style>
+  html {
+    writing-mode: vertical-lr;
+  }
+  .multicol {
+    column-count: 2;
+    block-size: 0;
+    border: 1px solid black;
+    margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+  }
+
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    padding: 1px;
+  }
+
+  .boxDecorationBreak {
+    padding: 5px;
+    box-decoration-break: clone;
+  }
+
+  </style>
+
+  <body>
+    <!-- Basic one with padding on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div>abc</div><div>def</div>
+      </div>
+    </div>
+
+    <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer boxDecorationBreak">
+        <div>abc</div><div>def</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1-ref.html
new file mode 100644
index 0000000000..7a0e90dcde
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1-ref.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 100px;
+    position: relative;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .gap {
+    inline-size: 4px;
+    block-size: 100%;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    inline-size: 25px;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+    position: absolute;
+    inset-block-start: 0px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    position: absolute;
+    inset-block-start: 0px;
+    inset-inline-start: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    position: absolute;
+    inset-block-start: 25px;
+    inset-inline-start: 50px;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    position: absolute;
+    inset-block-start: 25px;
+    inset-inline-start: 75px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <!-- Adjust top to simulate padding. -->
+        <header style="inset-block-start: 5px"></header><nav style="inset-block-start: 5px"></nav>
+        <article style="inset-block-start: 30px"></article><footer style="inset-block-start: 30px"></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header style="inline-size: 22px; inset-block-start: 5px"></header>
+        <nav style="inline-size: 22px; inset-block-start: 5px; inset-inline-start: 26px"></nav>
+        <article style="inline-size: 22px; inset-block-start: 30px; inset-inline-start: 52px;"></article>
+        <footer style="inline-size: 22px; inset-block-start: 30px; inset-inline-start: 78px;"></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1a.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1a.html
new file mode 100644
index 0000000000..925f83b062
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1a.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1b.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1b.html
new file mode 100644
index 0000000000..e8ef47b929
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1b.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer, article, nav, header {
+    flex-grow: 1;
+  }
+  footer {
+    background: cyan;
+    block-size: 100px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1c.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1c.html
new file mode 100644
index 0000000000..d8b92674d8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1c.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with block-size:auto flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  header {
+    background: cyan;
+  }
+  header > div {
+    block-size: 100px;
+  }
+  nav {
+    background: magenta;
+    align-self: flex-start;
+  }
+  nav > div {
+    block-size: 25px;
+  }
+  article {
+    background: yellow;
+    align-self: center;
+  }
+  article > div {
+    block-size: 50px;
+  }
+  footer {
+    background: black;
+    align-self: flex-end;
+  }
+  footer > div {
+    block-size: 75px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1d.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1d.html
new file mode 100644
index 0000000000..b73bf25ea8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1d.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with block-size:auto flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  footer {
+    background: cyan;
+  }
+  footer > div {
+    block-size: 100px;
+  }
+  article {
+    background: magenta;
+    align-self: flex-start;
+  }
+  article > div {
+    block-size: 25px;
+  }
+  nav {
+    background: yellow;
+    align-self: center;
+  }
+  nav > div {
+    block-size: 50px;
+  }
+  header {
+    background: black;
+    align-self: flex-end;
+  }
+  header > div {
+    block-size: 75px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header><div></div></header><nav><div></div></nav>
+        <article><div></div></article><footer><div></div></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1e.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1e.html
new file mode 100644
index 0000000000..31417fe384
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1e.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap.  Also use a script to enlarge multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 30px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1f.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1f.html
new file mode 100644
index 0000000000..4102f94e09
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1f.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to enlarge multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 30px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer, article, nav, header {
+    flex-grow: 1;
+  }
+  footer {
+    background: cyan;
+    block-size: 100px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1g.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1g.html
new file mode 100644
index 0000000000..149a2b0c14
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1g.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap.  Also use a script to shrink multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1h.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1h.html
new file mode 100644
index 0000000000..dd254dc1a8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1h.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to shrink multicol block-size.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row-reverse;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  footer, article, nav, header {
+    flex-grow: 1;
+  }
+  footer {
+    background: cyan;
+    block-size: 100px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+
+  body.multicol-children-block-size > .multicol {
+    block-size: 50px;
+  }
+  </style>
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+       of an already fragmented flex container. */
+    document.body.classList.add("multicol-children-block-size");
+  }
+  </script>
+
+  <body onload="runTest()">
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2-ref.html
new file mode 100644
index 0000000000..62934a94d0
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2-ref.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    block-size: 80px;
+    position: relative;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+  .gap {
+    inline-size: 4px;
+    block-size: 100%;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    inline-size: 25px;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+    position: absolute;
+    inset-block-start: 0px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    position: absolute;
+    inset-block-start: 0px;
+    inset-inline-start: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    position: absolute;
+    inset-block-start: 15px;
+    inset-inline-start: 50px;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    position: absolute;
+    inset-block-start: 5px;
+    inset-inline-start: 75px;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <!-- Adjust top to simulate padding. -->
+        <header style="inset-block-start: 5px"></header><nav style="inset-block-start: 5px"></nav>
+        <article style="inset-block-start: 20px"></article><footer style="inset-block-start: 10px"></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header style="inline-size: 22px; inset-block-start: 5px"></header>
+        <nav style="inline-size: 22px; inset-block-start: 5px; inset-inline-start: 26px"></nav>
+        <article style="inline-size: 22px; inset-block-start: 20px; inset-inline-start: 52px;"></article>
+        <footer style="inline-size: 22px; inset-block-start: 10px; inset-inline-start: 78px;"></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2.html
new file mode 100644
index 0000000000..51a996eafd
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-rl-2-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. The block-size of the flex container is made shorter than <header>.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid lightgray;
+    /* Block-size is deliberately made shorter than <header>. */
+    block-size: 80px;
+  }
+  .border-padding {
+    border-block-width: 10px;
+    padding-block: 5px;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Basic one without any margin/border/padding. -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border and padding. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3-ref.html
new file mode 100644
index 0000000000..f71268870d
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3-ref.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 50px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+    padding-block: 15px;
+  }
+  .flexContainer {
+    background: gray;
+    /* border-width is 0 by default; some sub-testcases will increase it. */
+    border: 0 solid white;
+    block-size: 100px;
+    position: relative;
+  }
+  .gap {
+    inline-size: 4px;
+    block-size: 100%;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    inline-size: 25px;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+    position: absolute;
+    inset-block-start: 0px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    position: absolute;
+    inset-block-start: 0px;
+    inset-inline-start: 25px;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    position: absolute;
+    inset-block-start: 25px;
+    inset-inline-start: 50px;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    position: absolute;
+    inset-block-start: 25px;
+    inset-inline-start: 75px;
+  }
+  </style>
+
+  <body>
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with border, padding, and column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer border-padding">
+        <header style="inline-size: 22px"></header>
+        <nav style="inline-size: 22px; inset-inline-start: 26px"></nav>
+        <article style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 52px;"></article>
+        <footer style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 78px;"></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3a.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3a.html
new file mode 100644
index 0000000000..6d4fb10d60
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3a.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line row flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-rl-3-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, column-gap, and box-decoration-break:clone.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    background: gray;
+    border: 0 solid white;
+    border-block-width: 15px;
+    box-decoration-break: clone;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  header {
+    background: cyan;
+    block-size: 100px;
+  }
+  nav {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  article {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  footer {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3b.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3b.html
new file mode 100644
index 0000000000..cdd15cddeb
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3b.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line row-reverse flex container with fixed block-size flex items</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-rl-3-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, column-gap, and box-decoration-break:clone.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    block-size: 80px;
+    inline-size: 320px;
+    column-count: 3;
+    column-fill: auto;
+    column-gap: 10px;
+    border: 5px solid orange;
+    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+  }
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row-reverse;
+    background: gray;
+    border: 0 solid white;
+    border-block-width: 15px;
+    box-decoration-break: clone;
+  }
+
+  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+  header, nav, article, footer {
+    flex-grow: 1;
+  }
+  footer {
+    background: cyan;
+    block-size: 100px;
+  }
+  article {
+    background: magenta;
+    block-size: 25px;
+    align-self: flex-start;
+  }
+  nav {
+    background: yellow;
+    block-size: 50px;
+    align-self: center;
+  }
+  header {
+    background: black;
+    block-size: 75px;
+    align-self: flex-end;
+  }
+  </style>
+
+  <body>
+    <!-- Test a container with margin-block-start. -->
+    <div class="multicol">
+      <div class="flexContainer" style="margin-block-start: 25px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container not at the top of the column/page. -->
+    <div class="multicol">
+      <div style="block-size: 25px"></div>
+      <div class="flexContainer">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+
+    <!-- Test a container with column-gap. -->
+    <div class="multicol">
+      <div class="flexContainer" style="column-gap: 4px">
+        <header></header><nav></nav><article></article><footer></footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4-ref.html
new file mode 100644
index 0000000000..1e9e887f95
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test Reference: Fragmentation of block-size:auto single-line row flex container in a zero block-size multicol</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    column-count: 2;
+    block-size: 0;
+    border: 1px solid black;
+    margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+  }
+
+  .flexContainer {
+    display: block;
+    padding: 1px;
+  }
+
+  .boxDecorationBreak {
+    padding: 5px;
+    box-decoration-break: clone;
+  }
+
+  </style>
+
+  <body>
+    <!-- Basic one with padding on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div>abcdef</div>
+      </div>
+    </div>
+
+    <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer boxDecorationBreak">
+        <div>abcdef</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4.html
new file mode 100644
index 0000000000..c8e4293e3e
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container in a zero block-size multicol</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+  <link rel="match" href="flexbox-single-row-vertical-rl-4-ref.html">
+  <meta name="assert" content="This test verifies fragmentation of flex containers can make progress in a zero block-size multicol.">
+
+  <style>
+  html {
+    writing-mode: vertical-rl;
+  }
+  .multicol {
+    column-count: 2;
+    block-size: 0;
+    border: 1px solid black;
+    margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+  }
+
+  .flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    padding: 1px;
+  }
+
+  .boxDecorationBreak {
+    padding: 5px;
+    box-decoration-break: clone;
+  }
+
+  </style>
+
+  <body>
+    <!-- Basic one with padding on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div>abc</div><div>def</div>
+      </div>
+    </div>
+
+    <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+    <div class="multicol">
+      <div class="flexContainer boxDecorationBreak">
+        <div>abc</div><div>def</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html
new file mode 100644
index 0000000000..b9892af217
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 30px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+    }
+    .flexContainer {
+      background: teal;
+      border: 1px dashed black;
+    }
+    .item {
+      display: block;
+      width: 100%;
+      height: 20px;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, smaller than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, between available height and child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 15px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, same as child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 20px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, larger than child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 24px">
+        <img src="" class="item">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html
new file mode 100644
index 0000000000..e12e39ace1
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+     child, with the flex container having "flex-direction: row" and
+     "flex-wrap: wrap".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 30px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      background: teal;
+      border: 1px dashed black;
+    }
+    .item {
+      width: 100%;
+      height: 20px;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, smaller than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, between available height and child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 15px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, same as child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 20px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, larger than child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 24px">
+        <img src="" class="item">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html
new file mode 100644
index 0000000000..2dde592514
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+     child, with the flex container having "flex-direction: row".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 30px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: row;
+      background: teal;
+      border: 1px dashed black;
+    }
+    .item {
+      width: 100%;
+      height: 20px;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, smaller than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, between available height and child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 15px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, same as child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 20px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, larger than child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 24px">
+        <img src="" class="item">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html
new file mode 100644
index 0000000000..5e5aa0ba7d
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+     child, with the flex container having "flex-direction: row-reverse" and
+     "flex-wrap: wrap".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 30px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: row-reverse;
+      flex-wrap: wrap;
+      background: teal;
+      border: 1px dashed black;
+    }
+    .item {
+      width: 100%;
+      height: 20px;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, smaller than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, between available height and child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 15px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, same as child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 20px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, larger than child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 24px">
+        <img src="" class="item">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html
new file mode 100644
index 0000000000..2ea73ddfb7
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+     child, with the flex container having "flex-direction: row-reverse".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 30px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: row-reverse;
+      background: teal;
+      border: 1px dashed black;
+    }
+    .item {
+      width: 100%;
+      height: 20px;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, smaller than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, between available height and child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 15px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, same as child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 20px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, larger than child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 24px">
+        <img src="" class="item">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html
new file mode 100644
index 0000000000..47a01df2cb
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+     child, with the flex container having "flex-direction: column" and
+     "flex-wrap: wrap".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 30px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      background: teal;
+      border: 1px dashed black;
+    }
+    .item {
+      width: 100%;
+      height: 20px;
+      flex: none;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, smaller than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, between available height and child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 15px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, same as child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 20px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, larger than child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 24px">
+        <img src="" class="item">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html
new file mode 100644
index 0000000000..9aeda66e04
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+     child, with the flex container having "flex-direction: column".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 30px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: column;
+      background: teal;
+      border: 1px dashed black;
+    }
+    .item {
+      width: 100%;
+      height: 20px;
+      flex: none;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, smaller than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, between available height and child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 15px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, same as child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 20px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, larger than child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 24px">
+        <img src="" class="item">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html
new file mode 100644
index 0000000000..c9c7f484ba
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+     child, with the flex container having "flex-direction: column-reverse"
+     and "flex-wrap: wrap".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 30px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: column-reverse;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      background: teal;
+      border: 1px dashed black;
+    }
+    .item {
+      width: 100%;
+      height: 20px;
+      flex: none;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, smaller than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, between available height and child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 15px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, same as child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 20px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, larger than child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 24px">
+        <img src="" class="item">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html
new file mode 100644
index 0000000000..adb1447519
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+     child, with the flex container having "flex-direction: column-reverse".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 30px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: column-reverse;
+      justify-content: flex-end;
+      background: teal;
+      border: 1px dashed black;
+    }
+    .item {
+      width: 100%;
+      height: 20px;
+      flex: none;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, smaller than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, between available height and child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 15px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, same as child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 20px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, larger than child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 24px">
+        <img src="" class="item">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html
new file mode 100644
index 0000000000..458ddd8cd1
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with several children in a
+     multi-line vertical flexbox.
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 38px;
+      width: 100px;
+      column-width: 60px;
+      column-fill: auto;
+      border: 2px solid purple;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+    }
+    .flexContainer {
+      background: yellow;
+    }
+    .item {
+      width: 40px;
+      height: 15px;
+      border: 1px dotted teal;
+      margin: 1px;
+      font: 10px serif;
+      float: left;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: calc(19px*3)">
+        <div style="width: 50px">
+          <div class="item">1</div>
+          <div class="item">2</div>
+          <div class="item">3</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- auto-height container, with enough children that our last flex line
+         overflows (in the cross axis) -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: calc(19px*5)">
+        <div style="width: 50px">
+          <div class="item">1</div>
+          <div class="item">2</div>
+          <div class="item">3</div>
+          <div class="item">4</div>
+          <div class="item">5</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- fixed-height container-->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 70px">
+        <div style="width: 50px">
+          <div class="item">1</div>
+          <div class="item">2</div>
+          <div class="item">3</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- fixed-height container, with enough children that our last flex line
+         overflows (in the cross axis) -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 70px">
+        <div style="width: 100px">
+          <div class="item">1</div>
+          <div class="item">4</div>
+          <div class="item">2</div>
+          <div class="item">5</div>
+          <div class="item">3</div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html
new file mode 100644
index 0000000000..5989681ae4
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with several children in a
+     multi-line vertical flexbox.
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 38px;
+      width: 100px;
+      column-width: 60px;
+      column-fill: auto;
+      border: 2px solid purple;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      align-content: flex-start;
+      background: yellow;
+    }
+    .item {
+      width: 40px;
+      height: 15px;
+      border: 1px dotted teal;
+      margin: 1px;
+      font: 10px serif;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div class="item">1</div>
+        <div class="item">2</div>
+        <div class="item">3</div>
+      </div>
+    </div>
+
+    <!-- auto-height container, with enough children that our last flex line
+         overflows (in the cross axis) -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <div class="item">1</div>
+        <div class="item">2</div>
+        <div class="item">3</div>
+        <div class="item">4</div>
+        <div class="item">5</div>
+      </div>
+    </div>
+
+    <!-- fixed-height container-->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 70px">
+        <div class="item">1</div>
+        <div class="item">2</div>
+        <div class="item">3</div>
+      </div>
+    </div>
+
+    <!-- fixed-height container, with enough children that our last flex line
+         overflows (in the cross axis) -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 70px">
+        <div class="item">1</div>
+        <div class="item">2</div>
+        <div class="item">3</div>
+        <div class="item">4</div>
+        <div class="item">5</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3-ref.html
new file mode 100644
index 0000000000..e21ddc8d23
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3-ref.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      border: 2px solid orange;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+      position: relative;
+    }
+    .flexContainer {
+      width: 40px;
+      background: teal;
+      border: 1px dashed black;
+    }
+    .continuation {
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+    .item {
+      display: block;
+      width: 100%;
+      height: 20px;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, smaller than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, between available height and child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 15px">
+        <img src="" class="item">
+      </div>
+      <div class="flexContainer continuation" style="height: 0px"></div>
+    </div>
+    </div>
+
+    <!-- fixed-height container, same as child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 20px">
+        <img src="" class="item">
+      </div>
+      <div class="flexContainer continuation" style="height: 0px"></div>
+    </div>
+
+    <!-- fixed-height container, larger than child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 20px">
+        <img src="" class="item">
+      </div>
+      <div class="flexContainer continuation" style="height: 4px"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a-wrap.html
new file mode 100644
index 0000000000..074a676db5
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a-wrap.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+     child, with the flex container having "flex-direction: row",
+     "flex-wrap: wrap", and "box-decoration-break: clone".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 30px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      background: teal;
+      border: 1px dashed black;
+      box-decoration-break: clone;
+    }
+    .item {
+      width: 100%;
+      height: 20px;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, smaller than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, between available height and child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 15px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, same as child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 20px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, larger than child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 24px">
+        <img src="" class="item">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a.html
new file mode 100644
index 0000000000..2196040388
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+     child, with the flex container having "flex-direction: row" and
+     "box-decoration-break: clone".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 30px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: row;
+      background: teal;
+      border: 1px dashed black;
+      box-decoration-break: clone;
+    }
+    .item {
+      width: 100%;
+      height: 20px;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, smaller than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, between available height and child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 15px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, same as child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 20px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, larger than child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 24px">
+        <img src="" class="item">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b-wrap.html
new file mode 100644
index 0000000000..3dbec66a67
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b-wrap.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+     child, with the flex container having "flex-direction: row-reverse",
+     "flex-wrap: wrap" and "box-decoration-break: clone".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 30px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: row-reverse;
+      flex-wrap: wrap;
+      background: teal;
+      border: 1px dashed black;
+      box-decoration-break: clone;
+    }
+    .item {
+      width: 100%;
+      height: 20px;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, smaller than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, between available height and child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 15px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, same as child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 20px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, larger than child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 24px">
+        <img src="" class="item">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b.html
new file mode 100644
index 0000000000..b3f3211633
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+     child, with the flex container having "flex-direction: row-reverse" and
+     "box-decoration-break: clone".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 30px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: row-reverse;
+      background: teal;
+      border: 1px dashed black;
+      box-decoration-break: clone;
+    }
+    .item {
+      width: 100%;
+      height: 20px;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, smaller than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, between available height and child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 15px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, same as child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 20px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, larger than child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 24px">
+        <img src="" class="item">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c-wrap.html
new file mode 100644
index 0000000000..0a36b822f2
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c-wrap.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+     child, with the flex container having "flex-direction: column",
+     "flex-wrap: wrap", and "box-decoration-break: clone".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 30px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      background: teal;
+      border: 1px dashed black;
+      box-decoration-break: clone;
+    }
+    .item {
+      width: 100%;
+      height: 20px;
+      flex: none;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, smaller than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, between available height and child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 15px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, same as child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 20px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, larger than child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 24px">
+        <img src="" class="item">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c.html
new file mode 100644
index 0000000000..80a35406dd
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+     child, with the flex container having "flex-direction: column" and
+     "box-decoration-break: clone".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 30px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: column;
+      background: teal;
+      border: 1px dashed black;
+      box-decoration-break: clone;
+    }
+    .item {
+      width: 100%;
+      height: 20px;
+      flex: none;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, smaller than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, between available height and child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 15px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, same as child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 20px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, larger than child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 24px">
+        <img src="" class="item">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d-wrap.html
new file mode 100644
index 0000000000..c76e8d12a8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d-wrap.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+     child, with the flex container having "flex-direction: column-reverse",
+     "flex-wrap: wrap" and "box-decoration-break: clone".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 30px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: column-reverse;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      background: teal;
+      border: 1px dashed black;
+      box-decoration-break: clone;
+    }
+    .item {
+      width: 100%;
+      height: 20px;
+      flex: none;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, smaller than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, between available height and child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 15px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, same as child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 20px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, larger than child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 24px">
+        <img src="" class="item">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d.html
new file mode 100644
index 0000000000..f78ad833bf
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+     child, with the flex container having "flex-direction: column-reverse" and
+     "box-decoration-break: clone".
+-->
+<html>
+  <head>
+    <style>
+    .multicol {
+      height: 10px;
+      width: 100px;
+      column-width: 30px;
+      column-fill: auto;
+      border: 2px solid orange;
+      margin-bottom: 15px; /* (just for spacing between testcases) */
+    }
+    .flexContainer {
+      display: flex;
+      flex-direction: column-reverse;
+      justify-content: flex-end;
+      background: teal;
+      border: 1px dashed black;
+      box-decoration-break: clone;
+    }
+    .item {
+      width: 100%;
+      height: 20px;
+      flex: none;
+    }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height container: -->
+    <div class="multicol">
+      <div class="flexContainer">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, smaller than available height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 8px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, between available height and child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 15px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, same as child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 20px">
+        <img src="" class="item">
+      </div>
+    </div>
+
+    <!-- fixed-height container, larger than child height: -->
+    <div class="multicol">
+      <div class="flexContainer" style="height: 24px">
+        <img src="" class="item">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/reftest.list b/layout/reftests/flexbox/pagination/reftest.list
new file mode 100644
index 0000000000..cb5e5e9a57
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/reftest.list
@@ -0,0 +1,214 @@
+# Tests with an empty flex container being fragmented:
+== flexbox-empty-1a.html flexbox-empty-1-ref.html
+== flexbox-empty-1b.html flexbox-empty-1-ref.html
+== flexbox-empty-1c.html flexbox-empty-1-ref.html
+== flexbox-empty-1d.html flexbox-empty-1-ref.html
+
+# Tests with an empty flex container that overflows a short fixed-height block
+# being fragmented:
+== flexbox-empty-1e.html flexbox-empty-1-ref.html
+== flexbox-empty-1f.html flexbox-empty-1-ref.html
+== flexbox-empty-1g.html flexbox-empty-1-ref.html
+== flexbox-empty-1h.html flexbox-empty-1-ref.html
+
+# Tests with an empty flex container being fragmented, with margin, border,
+# and/or padding being taller than the available height:
+fuzzy-if(Android,0-128,0-10) == flexbox-empty-2a.html flexbox-empty-2-ref.html
+fuzzy-if(Android,0-128,0-10) == flexbox-empty-2b.html flexbox-empty-2-ref.html
+fuzzy-if(Android,0-128,0-10) == flexbox-empty-2c.html flexbox-empty-2-ref.html
+fuzzy-if(Android,0-128,0-10) == flexbox-empty-2d.html flexbox-empty-2-ref.html
+
+# Tests for how we fragment a flex container with one unbreakable child
+== flexbox-unbreakable-child-1a.html      flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1a-wrap.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1b.html      flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1b-wrap.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1c.html      flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1c-wrap.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1d.html      flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1d-wrap.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-2.html       flexbox-unbreakable-child-2-ref.html
+
+# Tests for how we fragment a flex container with one unbreakable child and
+# "box-decoration-break: clone"
+== flexbox-unbreakable-child-3a.html      flexbox-unbreakable-child-3-ref.html
+== flexbox-unbreakable-child-3a-wrap.html flexbox-unbreakable-child-3-ref.html
+== flexbox-unbreakable-child-3b.html      flexbox-unbreakable-child-3-ref.html
+== flexbox-unbreakable-child-3b-wrap.html flexbox-unbreakable-child-3-ref.html
+== flexbox-unbreakable-child-3c.html      flexbox-unbreakable-child-3-ref.html
+== flexbox-unbreakable-child-3c-wrap.html flexbox-unbreakable-child-3-ref.html
+== flexbox-unbreakable-child-3d.html      flexbox-unbreakable-child-3-ref.html
+== flexbox-unbreakable-child-3d-wrap.html flexbox-unbreakable-child-3-ref.html
+
+# Tests for how we fragment flex items in a single-line column flex container.
+== flexbox-single-column-1a.html flexbox-single-column-1-ref.html
+== flexbox-single-column-1b.html flexbox-single-column-1-ref.html
+== flexbox-single-column-1c.html flexbox-single-column-1-ref.html
+== flexbox-single-column-1d.html flexbox-single-column-1-ref.html
+== flexbox-single-column-1e.html flexbox-single-column-1-ref.html
+== flexbox-single-column-1f.html flexbox-single-column-1-ref.html
+== flexbox-single-column-1g.html flexbox-single-column-1-ref.html
+== flexbox-single-column-1h.html flexbox-single-column-1-ref.html
+== flexbox-single-column-1i.html flexbox-single-column-1-ref.html
+== flexbox-single-column-1j.html flexbox-single-column-1-ref.html
+== flexbox-single-column-2.html flexbox-single-column-2-ref.html
+== flexbox-single-column-3a.html flexbox-single-column-3-ref.html
+== flexbox-single-column-3b.html flexbox-single-column-3-ref.html
+== flexbox-single-column-4.html flexbox-single-column-4-ref.html
+== flexbox-single-column-5.html flexbox-single-column-5-ref.html
+== flexbox-single-column-6.html flexbox-single-column-6-ref.html
+
+# Tests for how we fragment flex items in a single-line column flex container
+# under "writing-mode: vertical-lr".
+== flexbox-single-column-vertical-lr-1a.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-1b.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-1c.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-1d.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-1e.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-1f.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-1g.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-1h.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-1i.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-1j.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-2.html flexbox-single-column-vertical-lr-2-ref.html
+== flexbox-single-column-vertical-lr-3a.html flexbox-single-column-vertical-lr-3-ref.html
+== flexbox-single-column-vertical-lr-3b.html flexbox-single-column-vertical-lr-3-ref.html
+== flexbox-single-column-vertical-lr-4.html flexbox-single-column-vertical-lr-4-ref.html
+== flexbox-single-column-vertical-lr-5.html flexbox-single-column-vertical-lr-5-ref.html
+== flexbox-single-column-vertical-lr-6.html flexbox-single-column-vertical-lr-6-ref.html
+
+# Tests for how we fragment flex items in a single-line column flex container
+# under "writing-mode: vertical-rl".
+== flexbox-single-column-vertical-rl-1a.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-1b.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-1c.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-1d.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-1e.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-1f.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-1g.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-1h.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-1i.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-1j.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-2.html flexbox-single-column-vertical-rl-2-ref.html
+== flexbox-single-column-vertical-rl-3a.html flexbox-single-column-vertical-rl-3-ref.html
+== flexbox-single-column-vertical-rl-3b.html flexbox-single-column-vertical-rl-3-ref.html
+== flexbox-single-column-vertical-rl-4.html flexbox-single-column-vertical-rl-4-ref.html
+== flexbox-single-column-vertical-rl-5.html flexbox-single-column-vertical-rl-5-ref.html
+== flexbox-single-column-vertical-rl-6.html flexbox-single-column-vertical-rl-6-ref.html
+
+# Tests for how we fragment flex items in a multi-line column flex container.
+== flexbox-multi-column-1a.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-1b.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-1c.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-1d.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-1e.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-1f.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-1g.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-1h.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-1i.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-1j.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-2.html flexbox-multi-column-2-ref.html
+
+# Tests for how we fragment flex items in a multi-line column flex container
+# under "writing-mode: vertical-lr".
+== flexbox-multi-column-vertical-lr-1a.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-1b.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-1c.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-1d.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-1e.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-1f.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-1g.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-1h.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-1i.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-1j.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-2.html flexbox-multi-column-vertical-lr-2-ref.html
+
+# Tests for how we fragment flex items in a multi-line column flex container
+# under "writing-mode: vertical-rl".
+== flexbox-multi-column-vertical-rl-1a.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-1b.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-1c.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-1d.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-1e.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-1f.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-1g.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-1h.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-1i.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-1j.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-2.html flexbox-multi-column-vertical-rl-2-ref.html
+
+# Tests for how we fragment flex items in a single-line row flex container.
+== flexbox-single-row-1a.html flexbox-single-row-1-ref.html
+== flexbox-single-row-1b.html flexbox-single-row-1-ref.html
+== flexbox-single-row-1c.html flexbox-single-row-1-ref.html
+== flexbox-single-row-1d.html flexbox-single-row-1-ref.html
+== flexbox-single-row-1e.html flexbox-single-row-1-ref.html
+== flexbox-single-row-1f.html flexbox-single-row-1-ref.html
+== flexbox-single-row-1g.html flexbox-single-row-1-ref.html
+== flexbox-single-row-1h.html flexbox-single-row-1-ref.html
+== flexbox-single-row-2.html flexbox-single-row-2-ref.html
+== flexbox-single-row-3a.html flexbox-single-row-3-ref.html
+== flexbox-single-row-3b.html flexbox-single-row-3-ref.html
+== flexbox-single-row-4.html flexbox-single-row-4-ref.html
+
+# Tests for how we fragment flex items in a single-line row flex container
+# under "writing-mode: vertical-lr".
+== flexbox-single-row-vertical-lr-1a.html flexbox-single-row-vertical-lr-1-ref.html
+== flexbox-single-row-vertical-lr-1b.html flexbox-single-row-vertical-lr-1-ref.html
+== flexbox-single-row-vertical-lr-1c.html flexbox-single-row-vertical-lr-1-ref.html
+== flexbox-single-row-vertical-lr-1d.html flexbox-single-row-vertical-lr-1-ref.html
+== flexbox-single-row-vertical-lr-1e.html flexbox-single-row-vertical-lr-1-ref.html
+== flexbox-single-row-vertical-lr-1f.html flexbox-single-row-vertical-lr-1-ref.html
+== flexbox-single-row-vertical-lr-1g.html flexbox-single-row-vertical-lr-1-ref.html
+== flexbox-single-row-vertical-lr-1h.html flexbox-single-row-vertical-lr-1-ref.html
+== flexbox-single-row-vertical-lr-2.html flexbox-single-row-vertical-lr-2-ref.html
+== flexbox-single-row-vertical-lr-3a.html flexbox-single-row-vertical-lr-3-ref.html
+== flexbox-single-row-vertical-lr-3b.html flexbox-single-row-vertical-lr-3-ref.html
+== flexbox-single-row-vertical-lr-4.html flexbox-single-row-vertical-lr-4-ref.html
+
+# Tests for how we fragment flex items in a single-line row flex container
+# under "writing-mode: vertical-rl".
+== flexbox-single-row-vertical-rl-1a.html flexbox-single-row-vertical-rl-1-ref.html
+== flexbox-single-row-vertical-rl-1b.html flexbox-single-row-vertical-rl-1-ref.html
+== flexbox-single-row-vertical-rl-1c.html flexbox-single-row-vertical-rl-1-ref.html
+== flexbox-single-row-vertical-rl-1d.html flexbox-single-row-vertical-rl-1-ref.html
+== flexbox-single-row-vertical-rl-1e.html flexbox-single-row-vertical-rl-1-ref.html
+== flexbox-single-row-vertical-rl-1f.html flexbox-single-row-vertical-rl-1-ref.html
+== flexbox-single-row-vertical-rl-1g.html flexbox-single-row-vertical-rl-1-ref.html
+== flexbox-single-row-vertical-rl-1h.html flexbox-single-row-vertical-rl-1-ref.html
+== flexbox-single-row-vertical-rl-2.html flexbox-single-row-vertical-rl-2-ref.html
+== flexbox-single-row-vertical-rl-3a.html flexbox-single-row-vertical-rl-3-ref.html
+== flexbox-single-row-vertical-rl-3b.html flexbox-single-row-vertical-rl-3-ref.html
+== flexbox-single-row-vertical-rl-4.html flexbox-single-row-vertical-rl-4-ref.html
+
+# Tests for how we fragment flex items in a multi-line row flex container.
+== flexbox-multi-row-1a.html flexbox-multi-row-1-ref.html
+== flexbox-multi-row-1b.html flexbox-multi-row-1-ref.html
+== flexbox-multi-row-1c.html flexbox-multi-row-1-ref.html
+== flexbox-multi-row-1d.html flexbox-multi-row-1-ref.html
+== flexbox-multi-row-1e.html flexbox-multi-row-1-ref.html
+== flexbox-multi-row-1f.html flexbox-multi-row-1-ref.html
+== flexbox-multi-row-2a.html flexbox-multi-row-2-ref.html
+== flexbox-multi-row-2b.html flexbox-multi-row-2-ref.html
+
+# Tests for how we fragment flex items in a multi-line row flex container.
+# under "writing-mode: vertical-lr".
+== flexbox-multi-row-vertical-lr-1a.html flexbox-multi-row-vertical-lr-1-ref.html
+== flexbox-multi-row-vertical-lr-1b.html flexbox-multi-row-vertical-lr-1-ref.html
+== flexbox-multi-row-vertical-lr-1c.html flexbox-multi-row-vertical-lr-1-ref.html
+== flexbox-multi-row-vertical-lr-1d.html flexbox-multi-row-vertical-lr-1-ref.html
+== flexbox-multi-row-vertical-lr-1e.html flexbox-multi-row-vertical-lr-1-ref.html
+== flexbox-multi-row-vertical-lr-1f.html flexbox-multi-row-vertical-lr-1-ref.html
+== flexbox-multi-row-vertical-lr-2a.html flexbox-multi-row-vertical-lr-2-ref.html
+== flexbox-multi-row-vertical-lr-2b.html flexbox-multi-row-vertical-lr-2-ref.html
+
+# Tests for how we fragment flex items in a multi-line row flex container.
+# under "writing-mode: vertical-rl".
+== flexbox-multi-row-vertical-rl-1a.html flexbox-multi-row-vertical-rl-1-ref.html
+== flexbox-multi-row-vertical-rl-1b.html flexbox-multi-row-vertical-rl-1-ref.html
+== flexbox-multi-row-vertical-rl-1c.html flexbox-multi-row-vertical-rl-1-ref.html
+== flexbox-multi-row-vertical-rl-1d.html flexbox-multi-row-vertical-rl-1-ref.html
+== flexbox-multi-row-vertical-rl-1e.html flexbox-multi-row-vertical-rl-1-ref.html
+== flexbox-multi-row-vertical-rl-1f.html flexbox-multi-row-vertical-rl-1-ref.html
+== flexbox-multi-row-vertical-rl-2a.html flexbox-multi-row-vertical-rl-2-ref.html
+== flexbox-multi-row-vertical-rl-2b.html flexbox-multi-row-vertical-rl-2-ref.html
diff --git a/layout/reftests/flexbox/reftest.list b/layout/reftests/flexbox/reftest.list
new file mode 100644
index 0000000000..dbd6c705cd
--- /dev/null
+++ b/layout/reftests/flexbox/reftest.list
@@ -0,0 +1,127 @@
+# NOTE: Most of our flexbox tests have moved to the w3c-css reftest directory.
+# The tests that remain in *this* directory are still here because either:
+#   a) They (or one of their closely-related tests) use some moz-prefixed
+#      feature, e.g. MozReftestInvalidate.
+# ...or...
+#   b) They test a feature that has known bugs (e.g. bug 874713)
+#
+# Where possible & practical, we should try to address these so we can migrate
+# tests over to the w3c-css directory, so that they can become part of the
+# W3C's test suite.
+
+# SUBDIRECTORY: Reftests for paginated flex containers
+include pagination/reftest.list
+
+# Tests for cross-axis alignment (align-self / align-items properties)
+fails == flexbox-align-self-baseline-horiz-2.xhtml  flexbox-align-self-baseline-horiz-2-ref.xhtml # bug 793456, and possibly others
+== flexbox-align-self-baseline-horiz-3.xhtml flexbox-align-self-baseline-horiz-3-ref.xhtml
+== flexbox-align-self-baseline-horiz-4.xhtml flexbox-align-self-baseline-horiz-4-ref.xhtml
+== flexbox-item-align-self-dynamic-pos-001.html flexbox-item-align-self-dynamic-pos-001-ref.html
+== flexbox-item-align-self-dynamic-pos-002.html flexbox-item-align-self-dynamic-pos-002-ref.html
+
+# Tests for box-sizing on flex containers and flex items.
+== flexbox-box-sizing-on-container-horiz-1.html flexbox-box-sizing-on-container-horiz-1-ref.html
+== flexbox-box-sizing-on-container-vert-1.html flexbox-box-sizing-on-container-vert-1-ref.html
+== flexbox-box-sizing-on-items-horiz-1a.html flexbox-box-sizing-on-items-horiz-1-ref.html
+== flexbox-box-sizing-on-items-horiz-1b.html flexbox-box-sizing-on-items-horiz-1-ref.html
+== flexbox-box-sizing-on-items-vert-1a.html flexbox-box-sizing-on-items-vert-1-ref.html
+== flexbox-box-sizing-on-items-vert-1b.html flexbox-box-sizing-on-items-vert-1-ref.html
+
+# Tests for dynamic modifications of content inside/around a flex container
+== flexbox-dyn-changeContent-1.html flexbox-dyn-changeContent-1-ref.html
+== flexbox-dyn-changeContent-2.html flexbox-dyn-changeContent-2-ref.html
+== flexbox-dyn-changeFrameWidth-1.xhtml flexbox-dyn-changeFrameWidth-1-ref.xhtml
+== flexbox-dyn-changeFrameWidth-2.xhtml flexbox-dyn-changeFrameWidth-2-ref.xhtml
+== flexbox-dyn-changeFrameWidth-3.xhtml flexbox-dyn-changeFrameWidth-3-ref.xhtml
+== flexbox-dyn-changeFrameWidth-4.xhtml flexbox-dyn-changeFrameWidth-4-ref.xhtml
+== flexbox-dyn-changeOrder-1a.html flexbox-dyn-changeOrder-1-ref.html
+== flexbox-dyn-changeOrder-1b.html flexbox-dyn-changeOrder-1-ref.html
+== flexbox-dyn-changePadding-1a.xhtml flexbox-dyn-changePadding-1-ref.xhtml
+== flexbox-dyn-changePadding-1b.xhtml flexbox-dyn-changePadding-1-ref.xhtml
+
+# Tests for dynamic insertions of content into a flex container
+# (with existing [div | span | text] inside the flexbox, and new content
+# inserted adjacent to that existing content.)
+fuzzy(0-3,0-10) == flexbox-dyn-insertAroundDiv-1.xhtml flexbox-dyn-insertAroundDiv-1-ref.xhtml
+== flexbox-dyn-insertAroundDiv-2.xhtml flexbox-dyn-insertAroundDiv-2-ref.xhtml
+fuzzy(0-3,0-10) == flexbox-dyn-insertAroundDiv-3.xhtml flexbox-dyn-insertAroundDiv-3-ref.xhtml
+
+fuzzy(0-3,0-10) == flexbox-dyn-insertAroundSpan-1.xhtml flexbox-dyn-insertAroundDiv-1-ref.xhtml
+== flexbox-dyn-insertAroundSpan-2.xhtml flexbox-dyn-insertAroundDiv-2-ref.xhtml
+fuzzy(0-3,0-10) == flexbox-dyn-insertAroundSpan-3.xhtml flexbox-dyn-insertAroundDiv-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
+== 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
+== flexbox-empty-container-synthesized-baseline-001.html flexbox-empty-container-synthesized-baseline-001-ref.html
+
+# 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 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
+fuzzy-if(Android,0-16,0-400) == flexbox-position-fixed-1.xhtml     flexbox-position-fixed-1-ref.xhtml
+fuzzy-if(Android,0-16,0-400) == 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 inline content in a flexbox that gets wrapped in an anonymous block
+fails == flexbox-inlinecontent-horiz-1a.xhtml flexbox-inlinecontent-horiz-1-ref.xhtml # reference case rendering is incorrect; bug 858333
+fails == flexbox-inlinecontent-horiz-1b.xhtml flexbox-inlinecontent-horiz-1-ref.xhtml # reference case rendering is incorrect; bug 858333
+== flexbox-inlinecontent-horiz-2.xhtml  flexbox-inlinecontent-horiz-2-ref.xhtml
+== flexbox-inlinecontent-horiz-3a.xhtml flexbox-inlinecontent-horiz-3-ref.xhtml
+== flexbox-inlinecontent-horiz-3b.xhtml flexbox-inlinecontent-horiz-3-ref.xhtml
+== 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
+
+# Tests for intrinsic sizing of flexboxes
+== flexbox-intrinsic-sizing-horiz-1a.xhtml flexbox-intrinsic-sizing-horiz-1-ref.xhtml
+== 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 in an iframe that gets resized.
+fuzzy(0-1,0-8) fuzzy-if(cocoaWidget,0-1,0-14) == flexbox-resizeviewport-1.xhtml flexbox-resizeviewport-1-ref.xhtml
+fuzzy(0-1,0-5) == flexbox-resizeviewport-2.xhtml flexbox-resizeviewport-2-ref.xhtml
+
+# Tests for flexbox styling on things that don't support it
+== flexbox-styling-on-svg-1.svg flexbox-styling-on-svg-1-ref.svg
+
+# Tests with widgets as flex items
+fuzzy(0-1,0-1) == flexbox-widget-flex-items-1.html flexbox-widget-flex-items-1-ref.html
+fuzzy(0-1,0-19) fuzzy-if(swgl,0-26,0-20) == flexbox-widget-flex-items-2.html flexbox-widget-flex-items-2-ref.html
+skip-if(gtkWidget) fuzzy(0-6,0-8) == flexbox-widget-flex-items-3.html flexbox-widget-flex-items-3-ref.html # bug 1260965 for gtk
+fuzzy-if(gtkWidget,0-1,0-31) == flexbox-widget-flex-items-4.html flexbox-widget-flex-items-4-ref.html
+
+# Tests for table flex items
+== flexbox-table-flex-items-1.html flexbox-table-flex-items-1-ref.html
+== flexbox-table-flex-items-2.html flexbox-table-flex-items-2-ref.html
+== flexbox-table-flex-items-3.html flexbox-table-flex-items-3-ref.html
+== flexbox-table-flex-items-4.html flexbox-table-flex-items-4-ref.html
+== flexbox-table-flex-items-5.html flexbox-table-flex-items-5-ref.html
+
+# Tests for Bug 1500627. Keywords on min-height (block size) should behave as
+# the initial value. (i.e. auto)
+== flexbox-min-bsize-keywords-vert-1.html flexbox-min-bsize-keywords-vert-1-ref.html
+== flexbox-min-bsize-keywords-horiz-1.html flexbox-min-bsize-keywords-horiz-1-ref.html
+== flexbox-bsize-keywords-no-stretch-1.html flexbox-bsize-keywords-no-stretch-1-ref.html
diff --git a/layout/reftests/flexbox/solidblue.png b/layout/reftests/flexbox/solidblue.png
new file mode 100644
index 0000000000..a64b6a4255
Binary files /dev/null and b/layout/reftests/flexbox/solidblue.png differ
-- 
cgit v1.2.3