From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 21:33:14 +0200
Subject: Adding upstream version 115.7.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../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 +++++++++++++++++++++
 218 files changed, 21578 insertions(+)
 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

(limited to 'layout/reftests/flexbox/pagination')

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
-- 
cgit v1.2.3