summaryrefslogtreecommitdiffstats
path: root/layout/reftests/flexbox/pagination
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:47:29 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:47:29 +0000
commit0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch)
treea31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /layout/reftests/flexbox/pagination
parentInitial commit. (diff)
downloadfirefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz
firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/flexbox/pagination')
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html99
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1a.html105
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1b.html105
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1c.html105
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1d.html105
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1e.html109
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1f.html109
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1g.html109
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1h.html109
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html136
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-2a.html138
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-2b.html138
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-2c.html138
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-2d.html138
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-1-ref.html96
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-1a.html98
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-1b.html98
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-1c.html99
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-1d.html103
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-1e.html111
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-1f.html111
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-1g.html112
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-1h.html112
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-1i.html112
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-1j.html112
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-2-ref.html109
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-2.html101
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1-ref.html99
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1a.html101
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1b.html101
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1c.html102
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1d.html106
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1e.html114
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1f.html114
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1g.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1h.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1i.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1j.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2-ref.html112
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2.html104
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1-ref.html99
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1a.html101
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1b.html101
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1c.html102
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1d.html106
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1e.html114
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1f.html114
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1g.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1h.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1i.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1j.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2-ref.html112
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2.html104
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-1-ref.html108
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-1a.html106
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-1b.html106
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-1c.html120
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-1d.html120
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-1e.html120
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-1f.html120
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-2-ref.html116
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-2a.html107
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-2b.html108
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1-ref.html111
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1a.html109
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1b.html109
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1c.html123
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1d.html123
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1e.html123
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1f.html123
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2-ref.html119
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2a.html110
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2b.html111
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1-ref.html111
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1a.html109
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1b.html109
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1c.html123
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1d.html123
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1e.html123
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1f.html123
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2-ref.html119
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2a.html110
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2b.html111
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-1-ref.html96
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-1a.html98
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-1b.html98
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-1c.html99
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-1d.html103
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-1e.html111
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-1f.html111
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-1g.html112
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-1h.html112
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-1i.html112
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-1j.html112
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-2-ref.html97
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-2.html103
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-3-ref.html78
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-3a.html81
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-3b.html81
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-4-ref.html41
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-4.html46
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-5-ref.html46
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-5.html51
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-6-ref.html76
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-6.html81
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1-ref.html99
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1a.html101
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1b.html101
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1c.html102
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1d.html106
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1e.html114
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1f.html114
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1g.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1h.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1i.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1j.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2-ref.html100
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2.html106
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3-ref.html81
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3a.html84
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3b.html84
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4-ref.html44
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4.html49
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5-ref.html49
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5.html54
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6-ref.html79
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6.html84
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1-ref.html99
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1a.html101
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1b.html101
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1c.html102
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1d.html106
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1e.html114
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1f.html114
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1g.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1h.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1i.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1j.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2-ref.html100
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2.html106
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3-ref.html81
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3a.html84
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3b.html84
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4-ref.html44
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4.html49
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5-ref.html49
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5.html54
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6-ref.html79
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6.html84
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-1-ref.html111
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-1a.html98
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-1b.html98
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-1c.html111
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-1d.html111
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-1e.html112
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-1f.html112
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-1g.html112
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-1h.html112
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-2-ref.html111
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-2.html100
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-3-ref.html92
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-3a.html81
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-3b.html81
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-4-ref.html46
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-4.html51
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1-ref.html114
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1a.html101
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1b.html101
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1c.html114
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1d.html114
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1e.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1f.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1g.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1h.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2-ref.html114
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2.html103
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3-ref.html95
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3a.html84
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3b.html84
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4-ref.html49
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4.html54
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1-ref.html114
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1a.html101
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1b.html101
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1c.html114
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1d.html114
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1e.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1f.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1g.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1h.html115
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2-ref.html114
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2.html103
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3-ref.html95
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3a.html84
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3b.html84
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4-ref.html49
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4.html54
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html62
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html68
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html66
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html68
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html66
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html69
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html67
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html70
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html68
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html82
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html77
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3-ref.html71
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a-wrap.html69
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a.html68
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b-wrap.html69
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b.html68
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c-wrap.html70
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c.html69
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d-wrap.html71
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d.html70
-rw-r--r--layout/reftests/flexbox/pagination/reftest.list214
218 files changed, 21578 insertions, 0 deletions
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html
new file mode 100644
index 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