summaryrefslogtreecommitdiffstats
path: root/layout/reftests/flexbox
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
commit36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/flexbox
parentInitial commit. (diff)
downloadfirefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/flexbox')
-rw-r--r--layout/reftests/flexbox/ahem.css4
-rw-r--r--layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2-ref.xhtml52
-rw-r--r--layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.xhtml56
-rw-r--r--layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3-ref.xhtml50
-rw-r--r--layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3.xhtml46
-rw-r--r--layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4-ref.xhtml38
-rw-r--r--layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4.xhtml37
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1-ref.html38
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1.html37
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1-ref.html37
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1.html38
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1-ref.html60
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1a.html60
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1b.html60
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1-ref.html57
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1a.html61
-rw-r--r--layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1b.html61
-rw-r--r--layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1-ref.html37
-rw-r--r--layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1.html39
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeContent-1-ref.html27
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeContent-1.html37
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeContent-2-ref.html30
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeContent-2.html40
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-iframe.html24
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-ref.xhtml19
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1.xhtml33
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-iframe.html27
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-ref.xhtml19
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2.xhtml34
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-iframe.html29
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-ref.xhtml19
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3.xhtml34
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-iframe.html20
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-ref.xhtml19
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4.xhtml34
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeOrder-1-ref.html19
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeOrder-1a.html56
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changeOrder-1b.html57
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changePadding-1-ref.xhtml20
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changePadding-1a.xhtml46
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-changePadding-1b.xhtml46
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1-ref.xhtml39
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.xhtml87
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2-ref.xhtml41
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2.xhtml104
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3-ref.xhtml40
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3.xhtml104
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-1.xhtml87
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-2.xhtml107
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml107
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundText-1-ref.xhtml39
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundText-1.xhtml87
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundText-2-ref.xhtml44
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundText-2.xhtml107
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundText-3-ref.xhtml43
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertAroundText-3.xhtml107
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1-ref.xhtml43
-rw-r--r--layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1.xhtml103
-rw-r--r--layout/reftests/flexbox/flexbox-empty-1-ref.xhtml38
-rw-r--r--layout/reftests/flexbox/flexbox-empty-1a.xhtml39
-rw-r--r--layout/reftests/flexbox/flexbox-empty-1b.xhtml45
-rw-r--r--layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001-ref.html46
-rw-r--r--layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001.html48
-rw-r--r--layout/reftests/flexbox/flexbox-float-1-ref.xhtml39
-rw-r--r--layout/reftests/flexbox/flexbox-float-1a.xhtml47
-rw-r--r--layout/reftests/flexbox/flexbox-float-1b.xhtml43
-rw-r--r--layout/reftests/flexbox/flexbox-float-1c.xhtml75
-rw-r--r--layout/reftests/flexbox/flexbox-float-1d.xhtml75
-rw-r--r--layout/reftests/flexbox/flexbox-float-2-ref.xhtml39
-rw-r--r--layout/reftests/flexbox/flexbox-float-2a.xhtml42
-rw-r--r--layout/reftests/flexbox/flexbox-float-2b.xhtml46
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-1-ref.xhtml45
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-1a.xhtml39
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-1b.xhtml55
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-2-ref.xhtml34
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.xhtml46
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-3-ref.xhtml22
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-3a.xhtml24
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.xhtml38
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.xhtml38
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-4-ref.xhtml21
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-4.xhtml27
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-5-ref.xhtml25
-rw-r--r--layout/reftests/flexbox/flexbox-inlinecontent-horiz-5.xhtml36
-rw-r--r--layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1-ref.xhtml91
-rw-r--r--layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.xhtml102
-rw-r--r--layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1b.xhtml102
-rw-r--r--layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2-ref.xhtml45
-rw-r--r--layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2a.xhtml41
-rw-r--r--layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2b.xhtml44
-rw-r--r--layout/reftests/flexbox/flexbox-invalidation-1-ref.html36
-rw-r--r--layout/reftests/flexbox/flexbox-invalidation-1.html47
-rw-r--r--layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001-ref.html36
-rw-r--r--layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001.html45
-rw-r--r--layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002-ref.html36
-rw-r--r--layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002.html44
-rw-r--r--layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1-ref.html41
-rw-r--r--layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1.html50
-rw-r--r--layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1-ref.html39
-rw-r--r--layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1.html51
-rw-r--r--layout/reftests/flexbox/flexbox-position-absolute-1-ref.xhtml74
-rw-r--r--layout/reftests/flexbox/flexbox-position-absolute-1.xhtml70
-rw-r--r--layout/reftests/flexbox/flexbox-position-absolute-2-ref.xhtml74
-rw-r--r--layout/reftests/flexbox/flexbox-position-absolute-2.xhtml71
-rw-r--r--layout/reftests/flexbox/flexbox-position-absolute-3-ref.xhtml44
-rw-r--r--layout/reftests/flexbox/flexbox-position-absolute-3.xhtml46
-rw-r--r--layout/reftests/flexbox/flexbox-position-absolute-4-ref.xhtml50
-rw-r--r--layout/reftests/flexbox/flexbox-position-absolute-4.xhtml52
-rw-r--r--layout/reftests/flexbox/flexbox-position-fixed-1-ref.xhtml74
-rw-r--r--layout/reftests/flexbox/flexbox-position-fixed-1.xhtml70
-rw-r--r--layout/reftests/flexbox/flexbox-position-fixed-2-ref.xhtml74
-rw-r--r--layout/reftests/flexbox/flexbox-position-fixed-2.xhtml71
-rw-r--r--layout/reftests/flexbox/flexbox-position-fixed-3-ref.xhtml44
-rw-r--r--layout/reftests/flexbox/flexbox-position-fixed-3.xhtml46
-rw-r--r--layout/reftests/flexbox/flexbox-position-fixed-4-ref.xhtml51
-rw-r--r--layout/reftests/flexbox/flexbox-position-fixed-4.xhtml52
-rw-r--r--layout/reftests/flexbox/flexbox-resizeviewport-1-helper.html31
-rw-r--r--layout/reftests/flexbox/flexbox-resizeviewport-1-ref.xhtml22
-rw-r--r--layout/reftests/flexbox/flexbox-resizeviewport-1.xhtml40
-rw-r--r--layout/reftests/flexbox/flexbox-resizeviewport-2-helper.html32
-rw-r--r--layout/reftests/flexbox/flexbox-resizeviewport-2-ref.xhtml22
-rw-r--r--layout/reftests/flexbox/flexbox-resizeviewport-2.xhtml44
-rw-r--r--layout/reftests/flexbox/flexbox-styling-on-svg-1-ref.svg10
-rw-r--r--layout/reftests/flexbox/flexbox-styling-on-svg-1.svg15
-rw-r--r--layout/reftests/flexbox/flexbox-table-flex-items-1-ref.html59
-rw-r--r--layout/reftests/flexbox/flexbox-table-flex-items-1.html60
-rw-r--r--layout/reftests/flexbox/flexbox-table-flex-items-2-ref.html64
-rw-r--r--layout/reftests/flexbox/flexbox-table-flex-items-2.html73
-rw-r--r--layout/reftests/flexbox/flexbox-table-flex-items-3-ref.html66
-rw-r--r--layout/reftests/flexbox/flexbox-table-flex-items-3.html75
-rw-r--r--layout/reftests/flexbox/flexbox-table-flex-items-4-ref.html50
-rw-r--r--layout/reftests/flexbox/flexbox-table-flex-items-4.html54
-rw-r--r--layout/reftests/flexbox/flexbox-table-flex-items-5-ref.html45
-rw-r--r--layout/reftests/flexbox/flexbox-table-flex-items-5.html52
-rw-r--r--layout/reftests/flexbox/flexbox-widget-flex-items-1-ref.html35
-rw-r--r--layout/reftests/flexbox/flexbox-widget-flex-items-1.html46
-rw-r--r--layout/reftests/flexbox/flexbox-widget-flex-items-2-ref.html36
-rw-r--r--layout/reftests/flexbox/flexbox-widget-flex-items-2.html42
-rw-r--r--layout/reftests/flexbox/flexbox-widget-flex-items-3-ref.html35
-rw-r--r--layout/reftests/flexbox/flexbox-widget-flex-items-3.html43
-rw-r--r--layout/reftests/flexbox/flexbox-widget-flex-items-4-ref.html35
-rw-r--r--layout/reftests/flexbox/flexbox-widget-flex-items-4.html46
-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
-rw-r--r--layout/reftests/flexbox/reftest.list127
-rw-r--r--layout/reftests/flexbox/solidblue.pngbin0 -> 135 bytes
362 files changed, 28568 insertions, 0 deletions
diff --git a/layout/reftests/flexbox/ahem.css b/layout/reftests/flexbox/ahem.css
new file mode 100644
index 0000000000..884a41198b
--- /dev/null
+++ b/layout/reftests/flexbox/ahem.css
@@ -0,0 +1,4 @@
+@font-face {
+ font-family: "Ahem";
+ src: url(../fonts/Ahem.ttf);
+}
diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2-ref.xhtml
new file mode 100644
index 0000000000..26033bf78f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2-ref.xhtml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for behavior of the 'baseline' value for align-items and
+ align-self.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ .flexbox {
+ display: block;
+ border: 1px dashed blue;
+ font: 14px sans-serif;
+ }
+
+ input { height: 30px; }
+
+ textarea {
+ width: 30px;
+ height: 50px;
+ }
+
+ div.multilinebutton {
+ /* For comparison vs. "button.multilinebutton" in the testcase: */
+ -moz-appearance: button;
+ display: block;
+ text-align: center;
+ font: 20px sans-serif;
+ padding-top: 1px;
+ height: 49px;
+ width: 20px;
+ }
+
+ div { display: inline-block; }
+ table { display: inline-table; }
+
+ .lime { background: lime; }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ <div class="lime">text</div
+ ><input type="text" style="width: 20px; min-width: 0;" value="input"
+ /><textarea style="width: 30px">t e x t a r e a </textarea
+ ><table cellspacing="0" cellpadding="0">
+ <div class="multilinebutton">b<br/>t<br/>n</div>
+ </table>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.xhtml
new file mode 100644
index 0000000000..853f2c6ed0
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.xhtml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for behavior of the 'baseline' value for align-items (and
+ align-self, implicitly). This test baseline-aligns various types of
+ content, and the flexbox's vertical size depends on the aggregate
+ post-alignment height of its children.
+
+ This test checks baseline-alignment for a text <input> field, a
+ <textarea>, and a <button> with a multi-line label.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ .flexbox {
+ display: flex;
+ align-items: baseline;
+ border: 1px dashed blue;
+ font: 14px sans-serif;
+ }
+
+ input { height: 30px; }
+
+ textarea {
+ width: 30px;
+ height: 50px;
+ }
+
+ button.multilinebutton {
+ font: 20px sans-serif;
+ color: black;
+ padding: 0;
+ height: 50px;
+ width: 20px;
+ box-sizing: content-box;
+ }
+
+ .lime { background: lime; }
+ .orange { background: orange; }
+ .pink { background: pink; }
+ .aqua { background: aqua; }
+ .violet { background: violet; }
+ .tan { background: tan; }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ <div class="lime">text</div>
+ <input type="text" style="width: 20px; min-width: 0;" value="input"/>
+ <textarea style="width: 30px">t e x t a r e a </textarea>
+ <button class="multilinebutton">b<br/>t<br/>n</button>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3-ref.xhtml
new file mode 100644
index 0000000000..b138561977
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3-ref.xhtml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for behavior of the 'baseline' value for align-items and
+ align-self.
+
+ NOTE: For multi-line 'display: block' flex items in the testcase, we use
+ an inline-table here in the reference case, so that we get first-line
+ baseline alignment. (If we used an inline-block instead, that would give
+ us *last-line* baseline alignment.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ .flexbox {
+ display: block;
+ border: 1px dashed blue;
+ font: 14px sans-serif;
+ }
+
+ div, .flexbox > label { display: inline-block; }
+ table { display: inline-table; }
+
+ .lime { background: lime; }
+ .pink { background: pink; }
+ .aqua { background: aqua; }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ <div class="lime">text</div
+ ><button>btn</button
+ ><label class="pink">label</label
+ ><table cellspacing="0" cellpadding="0" class="aqua">
+ <label>lab<br/>el</label>
+ </table
+ ><table cellspacing="0" cellpadding="0">
+ <fieldset>field<br/>set</fieldset>
+ </table
+ ><table cellspacing="0" cellpadding="0">
+ <fieldset><legend>leg</legend>field<br/>set</fieldset>
+ </table
+ ><table cellspacing="0" cellpadding="0">
+ <fieldset><legend>leg<br/>end</legend>field<br/>set</fieldset>
+ </table>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3.xhtml
new file mode 100644
index 0000000000..94a9a1c9ed
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-3.xhtml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for behavior of the 'baseline' value for align-items (and
+ align-self, implicitly). This test has various types of baseline-aligned
+ content, and the flexbox's vertical size depends on the aggregate
+ post-alignment height of its children.
+
+ This test checks baseline-alignment for text <button>, for
+ various <input> fields, for <label>, and for <fieldset>.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ .flexbox {
+ display: flex;
+ align-items: baseline;
+ border: 1px dashed blue;
+ font: 14px sans-serif;
+ }
+
+ .big {
+ height: 100px;
+ font: 24px sans-serif;
+ margin-top: 20px;
+ }
+
+ .lime { background: lime; }
+ .pink { background: pink; }
+ .aqua { background: aqua; }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ <div class="lime">text</div>
+ <button>btn</button>
+ <label class="pink">label</label>
+ <label class="aqua">lab<br/>el</label>
+ <fieldset>field<br/>set</fieldset>
+ <fieldset><legend>leg</legend>field<br/>set</fieldset>
+ <fieldset><legend>leg<br/>end</legend>field<br/>set</fieldset>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4-ref.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4-ref.xhtml
new file mode 100644
index 0000000000..867fa4cfc8
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4-ref.xhtml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for behavior of the 'baseline' value for align-items and
+ align-self.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ display: block;
+ border: 1px dashed blue;
+ font: 14px sans-serif;
+ }
+
+ div { display: inline-block; }
+ table {
+ display: inline-table;
+ margin: 1px; /* to fix fuzziness from text overlapping table border */
+ }
+
+ .lime { background: lime; }
+ .pink { background: pink; }
+ .aqua { background: aqua; }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ <div class="lime">text</div
+ ><table class="pink" border="1">
+ <tr><td>tr1</td></tr>
+ <tr><td>tr2</td></tr>
+ </table>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4.xhtml b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4.xhtml
new file mode 100644
index 0000000000..266134a030
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-align-self-baseline-horiz-4.xhtml
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for behavior of the 'baseline' value for align-items (and
+ align-self, implicitly). This test baseline-aligns a <table>.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ display: flex;
+ align-items: baseline;
+ border: 1px dashed blue;
+ font: 14px sans-serif;
+ }
+
+ table {
+ margin: 1px; /* to fix fuzziness from text overlapping table border */
+ }
+
+ .lime { background: lime; }
+ .pink { background: pink; }
+ .aqua { background: aqua; }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ <div class="lime">text</div>
+ <table class="pink" border="1">
+ <tr><td>tr1</td></tr>
+ <tr><td>tr2</td></tr>
+ </table>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1-ref.html b/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1-ref.html
new file mode 100644
index 0000000000..14359e5949
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ width: 100px;
+ height: 20px;
+ border: 5px solid black;
+ }
+ .container > * {
+ height: 18px;
+ float: left;
+ }
+ .itemA {
+ width: 38px;
+ background: purple;
+ border: 1px solid indigo;
+ }
+ .itemB {
+ width: 58px;
+ background: teal;
+ border: 1px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1.html b/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1.html
new file mode 100644
index 0000000000..951cf918d6
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Test: Testing a horizontal flex container with box-sizing:border-box</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ display: flex;
+ width: 110px;
+ height: 30px;
+ border: 5px solid black;
+ box-sizing: border-box;
+ }
+ .itemA {
+ flex: 1 28px;
+ background: purple;
+ border: 1px solid indigo;
+ }
+ .itemB {
+ flex: 1 48px;
+ background: teal;
+ border: 1px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1-ref.html b/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1-ref.html
new file mode 100644
index 0000000000..f02e22d957
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ width: 20px;
+ height: 100px;
+ border: 5px solid black;
+ }
+ .container > * {
+ width: 18px;
+ }
+ .itemA {
+ height: 38px;
+ background: purple;
+ border: 1px solid indigo;
+ }
+ .itemB {
+ height: 58px;
+ background: teal;
+ border: 1px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1.html b/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1.html
new file mode 100644
index 0000000000..2351369b39
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-container-vert-1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Test: Testing a horizontal flex container with box-sizing:border-box</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ display: flex;
+ flex-direction: column;
+ width: 30px;
+ height: 110px;
+ border: 5px solid black;
+ box-sizing: border-box;
+ }
+ .itemA {
+ flex: 1 28px;
+ background: purple;
+ border: 1px solid indigo;
+ }
+ .itemB {
+ flex: 1 48px;
+ background: teal;
+ border: 1px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1-ref.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1-ref.html
new file mode 100644
index 0000000000..e4126b17c4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1-ref.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ width: 100px;
+ height: 30px;
+ border: 1px solid black;
+ float: left;
+ margin: 2px;
+ }
+ .container > * {
+ float: left; /* emulate the testcase's horizontal lineup of flex items */
+ }
+ .itemA {
+ width: 22px;
+ height: 22px;
+ background: purple;
+ border: 4px solid indigo;
+ }
+ .itemB {
+ width: 40px;
+ height: 20px;
+ background: teal;
+ border: 5px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <!-- FIRST ROW -->
+ <!-- 1 inflexible item -->
+ <div class="container">
+ <div class="itemA"></div>
+ </div>
+ <!-- 1 flexible item -->
+ <div class="container">
+ <div class="itemA" style="width: 92px"></div>
+ </div>
+
+ <div style="clear: both"></div>
+
+ <!-- SECOND ROW -->
+ <!-- 2 inflexible items -->
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+ <!-- 2 flexible items -->
+ <div class="container">
+ <div class="itemA" style="width: 32px"></div>
+ <div class="itemB" style="width: 50px"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1a.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1a.html
new file mode 100644
index 0000000000..a74f4a81cf
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1a.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Test: Testing a horizontal flex container with box-sizing:border-box on its flex items</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ display: flex;
+ width: 100px;
+ height: 30px;
+ border: 1px solid black;
+ float: left;
+ margin: 2px;
+ }
+ .container > * {
+ box-sizing: border-box;
+ }
+ .itemA {
+ width: 30px;
+ background: purple;
+ border: 4px solid indigo;
+ }
+ .itemB {
+ width: 50px;
+ background: teal;
+ border: 5px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <!-- FIRST ROW -->
+ <!-- 1 inflexible item -->
+ <div class="container">
+ <div class="itemA"></div>
+ </div>
+ <!-- 1 flexible item -->
+ <div class="container">
+ <div class="itemA" style="flex-grow: 1"></div>
+ </div>
+
+ <div style="clear: both"></div>
+
+ <!-- SECOND ROW -->
+ <!-- 2 inflexible items -->
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+ <!-- 2 flexible items -->
+ <div class="container">
+ <div class="itemA" style="flex-grow: 1"></div>
+ <div class="itemB" style="flex-grow: 1"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1b.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1b.html
new file mode 100644
index 0000000000..789dd14be0
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-horiz-1b.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Test: Testing a horizontal flex container with box-sizing:border-box on its flex items</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ display: flex;
+ width: 100px;
+ height: 30px;
+ border: 1px solid black;
+ float: left;
+ margin: 2px;
+ }
+ .container > * {
+ box-sizing: border-box;
+ }
+ .itemA {
+ flex-basis: 30px;
+ background: purple;
+ border: 4px solid indigo;
+ }
+ .itemB {
+ flex-basis: 50px;
+ background: teal;
+ border: 5px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <!-- FIRST ROW -->
+ <!-- 1 inflexible item -->
+ <div class="container">
+ <div class="itemA"></div>
+ </div>
+ <!-- 1 flexible item -->
+ <div class="container">
+ <div class="itemA" style="flex-grow: 1"></div>
+ </div>
+
+ <div style="clear: both"></div>
+
+ <!-- SECOND ROW -->
+ <!-- 2 inflexible items -->
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+ <!-- 2 flexible items -->
+ <div class="container">
+ <div class="itemA" style="flex-grow: 1"></div>
+ <div class="itemB" style="flex-grow: 1"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1-ref.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1-ref.html
new file mode 100644
index 0000000000..5d1f50af25
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1-ref.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ width: 30px;
+ height: 100px;
+ border: 1px solid black;
+ float: left;
+ margin: 2px;
+ }
+ .itemA {
+ width: 22px;
+ height: 22px;
+ background: purple;
+ border: 4px solid indigo;
+ }
+ .itemB {
+ width: 20px;
+ height: 40px;
+ background: teal;
+ border: 5px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <!-- FIRST ROW -->
+ <!-- 1 inflexible item -->
+ <div class="container">
+ <div class="itemA"></div>
+ </div>
+ <!-- 1 flexible item -->
+ <div class="container">
+ <div class="itemA" style="height: 92px"></div>
+ </div>
+
+ <div style="clear: both"></div>
+
+ <!-- SECOND ROW -->
+ <!-- 2 inflexible items -->
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+ <!-- 2 flexible items -->
+ <div class="container">
+ <div class="itemA" style="height: 32px"></div>
+ <div class="itemB" style="height: 50px"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1a.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1a.html
new file mode 100644
index 0000000000..e87e93372a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1a.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Test: Testing a vertical flex container with box-sizing:border-box on its flex items</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ display: flex;
+ flex-direction: column;
+ width: 30px;
+ height: 100px;
+ border: 1px solid black;
+ float: left;
+ margin: 2px;
+ }
+ .container > * {
+ box-sizing: border-box;
+ }
+ .itemA {
+ height: 30px;
+ background: purple;
+ border: 4px solid indigo;
+ }
+ .itemB {
+ height: 50px;
+ background: teal;
+ border: 5px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <!-- FIRST ROW -->
+ <!-- 1 inflexible item -->
+ <div class="container">
+ <div class="itemA"></div>
+ </div>
+ <!-- 1 flexible item -->
+ <div class="container">
+ <div class="itemA" style="flex-grow: 1"></div>
+ </div>
+
+ <div style="clear: both"></div>
+
+ <!-- SECOND ROW -->
+ <!-- 2 inflexible items -->
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+ <!-- 2 flexible items -->
+ <div class="container">
+ <div class="itemA" style="flex-grow: 1"></div>
+ <div class="itemB" style="flex-grow: 1"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1b.html b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1b.html
new file mode 100644
index 0000000000..7edbf83786
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-box-sizing-on-items-vert-1b.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Test: Testing a vertical flex container with box-sizing:border-box on its flex items</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .container {
+ display: flex;
+ flex-direction: column;
+ width: 30px;
+ height: 100px;
+ border: 1px solid black;
+ float: left;
+ margin: 2px;
+ }
+ .container > * {
+ box-sizing: border-box;
+ }
+ .itemA {
+ flex-basis: 30px;
+ background: purple;
+ border: 4px solid indigo;
+ }
+ .itemB {
+ flex-basis: 50px;
+ background: teal;
+ border: 5px solid lightblue;
+ }
+ </style>
+</head>
+<body>
+ <!-- FIRST ROW -->
+ <!-- 1 inflexible item -->
+ <div class="container">
+ <div class="itemA"></div>
+ </div>
+ <!-- 1 flexible item -->
+ <div class="container">
+ <div class="itemA" style="flex-grow: 1"></div>
+ </div>
+
+ <div style="clear: both"></div>
+
+ <!-- SECOND ROW -->
+ <!-- 2 inflexible items -->
+ <div class="container">
+ <div class="itemA"></div>
+ <div class="itemB"></div>
+ </div>
+ <!-- 2 flexible items -->
+ <div class="container">
+ <div class="itemA" style="flex-grow: 1"></div>
+ <div class="itemB" style="flex-grow: 1"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1-ref.html b/layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1-ref.html
new file mode 100644
index 0000000000..685e8a056c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Reference Case</title>
+ <meta charset="utf-8">
+ <style>
+ .container {
+ display: flex;
+ height: 100px;
+ border: 1px solid black;
+ }
+ .min-content-height {
+ background: pink;
+ align-self: start;
+ }
+ .max-content-height {
+ background: lightblue;
+ align-self: start;
+ }
+ .auto-height {
+ background: orange;
+ height: auto;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="min-content-height">min</div>
+ <div class="max-content-height">max</div>
+ <div class="auto-height">auto</div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1.html b/layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1.html
new file mode 100644
index 0000000000..d30efed851
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>Testing that the (default) 'align-items:stretch' only stretches flex items with height:auto (not height:[other-keyword])</title>
+ <meta charset="utf-8">
+ <style>
+ .container {
+ display: flex;
+ height: 100px;
+ border: 1px solid black;
+ }
+ .min-content-height {
+ background: pink;
+ height: -moz-min-content;
+ height: min-content;
+ }
+ .max-content-height {
+ background: lightblue;
+ height: -moz-max-content;
+ height: max-content;
+ }
+ .auto-height {
+ background: orange;
+ height: auto;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="min-content-height">min</div>
+ <div class="max-content-height">max</div>
+ <div class="auto-height">auto</div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeContent-1-ref.html b/layout/reftests/flexbox/flexbox-dyn-changeContent-1-ref.html
new file mode 100644
index 0000000000..164c24806b
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeContent-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <style>
+ #flex {
+ display: inline-flex;
+ border: 1px solid black;
+ }
+ #itemA {
+ background: purple;
+ width: 50%;
+ flex: none;
+ }
+ #itemB {
+ background: lightblue;
+ flex: none;
+ }
+ </style>
+</head>
+<body>
+ <div id="flex">
+ <div id="itemA"></div>
+ <div id="itemB">BBBBB</div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeContent-1.html b/layout/reftests/flexbox/flexbox-dyn-changeContent-1.html
new file mode 100644
index 0000000000..4a923397b9
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeContent-1.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <meta charset="UTF-8">
+ <!-- This testcase ensures that we correctly re-evaluate the percent width on
+ the purple flex item "itemA", in response to the width of its flex
+ container changing due to the other item gaining some more content. -->
+ <style>
+ #flex {
+ display: inline-flex;
+ border: 1px solid black;
+ }
+ #itemA {
+ background: purple;
+ width: 50%;
+ flex: none;
+ }
+ #itemB {
+ background: lightblue;
+ flex: none;
+ }
+ </style>
+ <script>
+ function tweak() {
+ document.getElementById("itemB").innerText = "BBBBB";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+</head>
+<body>
+ <div id="flex">
+ <div id="itemA"></div>
+ <div id="itemB">BB</div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeContent-2-ref.html b/layout/reftests/flexbox/flexbox-dyn-changeContent-2-ref.html
new file mode 100644
index 0000000000..4889b54944
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeContent-2-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <style>
+ #flex {
+ display: inline-flex;
+ flex-direction: column;
+ border: 1px solid black;
+ max-width: 50px;
+ height: 150px;
+ }
+ #itemA {
+ background: purple;
+ height: 50%;
+ flex: none;
+ }
+ #itemB {
+ background: lightblue;
+ flex: none;
+ }
+ </style>
+</head>
+<body>
+ <div id="flex">
+ <div id="itemA">A</div>
+ <div id="itemB">BB</div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeContent-2.html b/layout/reftests/flexbox/flexbox-dyn-changeContent-2.html
new file mode 100644
index 0000000000..19288997d4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeContent-2.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <meta charset="UTF-8">
+ <!-- This testcase ensures that we correctly re-evaluate the percent height
+ on the purple flex item "itemA", in response to the height of its flex
+ container being dynamically changed. -->
+ <style>
+ #flex {
+ display: inline-flex;
+ flex-direction: column;
+ border: 1px solid black;
+ max-width: 50px;
+ height: 60px;
+ }
+ #itemA {
+ background: purple;
+ height: 50%;
+ flex: none;
+ }
+ #itemB {
+ background: lightblue;
+ flex: none;
+ }
+ </style>
+ <script>
+ function tweak() {
+ document.getElementById("flex").style.height = "150px";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+</head>
+<body>
+ <div id="flex">
+ <div id="itemA">A</div>
+ <div id="itemB">BB</div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-iframe.html b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-iframe.html
new file mode 100644
index 0000000000..3801464ee2
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-iframe.html
@@ -0,0 +1,24 @@
+<html>
+ <head>
+ <style>
+ body {
+ margin: 0;
+ }
+ .outerContainer {
+ display: flex;
+ height: 100px;
+ background-color: red;
+ }
+ .innerContainer {
+ display: flex;
+ flex: 1;
+ background-color: lime;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="outerContainer">
+ <div class="innerContainer"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-ref.xhtml
new file mode 100644
index 0000000000..889ac83ce4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1-ref.xhtml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ #container {
+ width: 100px;
+ height: 100px;
+ background: lime;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="container"></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1.xhtml
new file mode 100644
index 0000000000..889b479c04
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-1.xhtml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks that we reflow nested flex containers sufficiently when
+ the window (or the iframe we're inside of) is horizontally resized.
+
+ This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ #frame {
+ width: 400px;
+ height: 200px;
+ border: 0;
+ }
+ </style>
+ <script>
+ function tweak() {
+ document.getElementById("frame").style.width = "100px";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <iframe id="frame" src="flexbox-dyn-changeFrameWidth-1-iframe.html"></iframe>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-iframe.html b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-iframe.html
new file mode 100644
index 0000000000..41a4a4c802
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-iframe.html
@@ -0,0 +1,27 @@
+<html>
+ <head>
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ display: flex;
+ flex-direction: column;
+ border: 10px solid lime;
+ width: 80px;
+ height: 80px;
+ background-color: red;
+ }
+ #item {
+ background-color: lime;
+ width: 80px;
+ height: 80px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="container">
+ <div id="item"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-ref.xhtml
new file mode 100644
index 0000000000..889ac83ce4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2-ref.xhtml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ #container {
+ width: 100px;
+ height: 100px;
+ background: lime;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="container"></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2.xhtml
new file mode 100644
index 0000000000..fdb0590959
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-2.xhtml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks that we don't end up with the effects of an intermediate
+ "measuring" reflow left over, when we resize a window that contains a
+ vertical flex container with a fixed-height flex item.
+
+ This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ #frame {
+ width: 400px;
+ height: 200px;
+ border: 0;
+ }
+ </style>
+ <script>
+ function tweak() {
+ document.getElementById("frame").style.width = "100px";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <iframe id="frame" src="flexbox-dyn-changeFrameWidth-2-iframe.html"></iframe>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-iframe.html b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-iframe.html
new file mode 100644
index 0000000000..b3e7dc27c8
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-iframe.html
@@ -0,0 +1,29 @@
+<html>
+ <head>
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ display: flex;
+ flex-direction: column;
+ border: 10px solid lime;
+ width: 80px;
+ height: 80px;
+ background-color: red;
+ }
+ #item {
+ background-color: lime;
+ min-height: 0;
+ width: 80px;
+ height: auto;
+ line-height: 80px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="container">
+ <div id="item">&nbsp;</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-ref.xhtml
new file mode 100644
index 0000000000..889ac83ce4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3-ref.xhtml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ #container {
+ width: 100px;
+ height: 100px;
+ background: lime;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="container"></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3.xhtml
new file mode 100644
index 0000000000..c412469025
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-3.xhtml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks that we don't end up with the effects of an intermediate
+ "measuring" reflow left over, when we resize a window that contains a
+ vertical flex container with an auto-height flex item.
+
+ This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ #frame {
+ width: 400px;
+ height: 200px;
+ border: 0;
+ }
+ </style>
+ <script>
+ function tweak() {
+ document.getElementById("frame").style.width = "100px";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <iframe id="frame" src="flexbox-dyn-changeFrameWidth-3-iframe.html"></iframe>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-iframe.html b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-iframe.html
new file mode 100644
index 0000000000..72cb0af38b
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-iframe.html
@@ -0,0 +1,20 @@
+<html>
+ <head>
+ <style>
+ body {
+ margin: 0;
+ }
+ .container {
+ display: flex;
+ background-color: lime;
+ top: 0;
+ bottom: 0;
+ position: absolute;
+ width: 100px;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="container"></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-ref.xhtml
new file mode 100644
index 0000000000..889ac83ce4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4-ref.xhtml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ #container {
+ width: 100px;
+ height: 100px;
+ background: lime;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="container"></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4.xhtml b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4.xhtml
new file mode 100644
index 0000000000..80a7a1cd5f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeFrameWidth-4.xhtml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks that we sufficiently reflow abspos flex containers that
+ have top:0;bottom:0 (which ends up effectively being like height:100%)
+ the window (or the iframe we're inside of) is vertically resized.
+
+ This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ #frame {
+ width: 100px;
+ height: 50px;
+ border: 0;
+ }
+ </style>
+ <script>
+ function tweak() {
+ document.getElementById("frame").style.height = "100px";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <iframe id="frame" src="flexbox-dyn-changeFrameWidth-4-iframe.html"></iframe>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeOrder-1-ref.html b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1-ref.html
new file mode 100644
index 0000000000..fb43b103d9
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<style>
+#limesquare {
+ width: 100px;
+ height: 100px;
+ background: lime;
+}
+</style>
+</head>
+<body>
+ <div id="limesquare"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeOrder-1a.html b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1a.html
new file mode 100644
index 0000000000..0feed67be4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1a.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks that we repaint, when a flex item is brought towards
+ the viewer in the stacking-order, without moving in the "x" or "y"
+ dimensions onscreen, using the "order" and "margin-left" properties.
+
+ This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html class="reftest-wait">
+<head>
+<style>
+#container {
+ display: flex;
+}
+
+#container > * {
+ width: 100px;
+ height: 100px;
+}
+
+#a {
+ background-color: red;
+}
+
+#b {
+ background-color: lime;
+}
+
+.foreground {
+ order: 1;
+ margin-left: -100px;
+}
+</style>
+<script>
+ function tweak() {
+ var a = document.getElementById("a");
+ var b = document.getElementById("b");
+ a.classList.remove("foreground");
+ b.classList.add("foreground");
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak);
+</script>
+</head>
+<body>
+ <div id="container">
+ <div id="a" class="foreground"></div>
+ <div id="b"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changeOrder-1b.html b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1b.html
new file mode 100644
index 0000000000..5e53f3b447
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changeOrder-1b.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks that we repaint, when a flex item is brought towards
+ the viewer in the stacking-order, without moving in the "x" or "y"
+ dimensions onscreen, using the "order" and "left" properties.
+
+ This test should end up rendering as a lime square, 100px by 100px.
+-->
+<html class="reftest-wait">
+<head>
+<style>
+#container {
+ display: flex;
+}
+
+#container > * {
+ width: 100px;
+ height: 100px;
+ position: relative;
+}
+
+#a {
+ background-color: red;
+}
+
+#b {
+ background-color: lime;
+}
+
+.foreground {
+ order: 1;
+ left: -100px;
+}
+</style>
+<script>
+ function tweak() {
+ var a = document.getElementById("a");
+ var b = document.getElementById("b");
+ a.classList.remove("foreground");
+ b.classList.add("foreground");
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak);
+</script>
+</head>
+<body>
+ <div id="container">
+ <div id="a" class="foreground"></div>
+ <div id="b"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changePadding-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-changePadding-1-ref.xhtml
new file mode 100644
index 0000000000..681a3cb4cc
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changePadding-1-ref.xhtml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ #container {
+ display: flex;
+ width: 100px;
+ height: 100px;
+ background: lime;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="container"></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changePadding-1a.xhtml b/layout/reftests/flexbox/flexbox-dyn-changePadding-1a.xhtml
new file mode 100644
index 0000000000..600ab0fafa
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changePadding-1a.xhtml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks that we reflow sufficiently when a grandchild of a
+ flex container needs an incremental reflow. This test should end up
+ rendering as a lime square, 100px by 100px.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ #container {
+ display: flex;
+ flex-direction: column;
+ width: 100px;
+ }
+ #item {
+ background: red;
+ }
+ #tweakMe {
+ height: 100px;
+ background: orange;
+ padding-left: 1px;
+ }
+ </style>
+ <script>
+ function tweak() {
+ var tweakMe = document.getElementById("tweakMe");
+ tweakMe.style.paddingLeft = "0";
+ tweakMe.style.background = "lime";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div id="container">
+ <div id="item">
+ <div id="tweakMe"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-changePadding-1b.xhtml b/layout/reftests/flexbox/flexbox-dyn-changePadding-1b.xhtml
new file mode 100644
index 0000000000..32390e6a27
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-changePadding-1b.xhtml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks that we reflow sufficiently when a stretched, nested
+ flex container needs an incremental reflow. This test should end up
+ rendering as a lime square, 100px by 100px.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ #outerContainer {
+ display: flex;
+ width: 100px;
+ height: 100px;
+ background: red;
+ }
+ #tweakMe {
+ display: flex;
+ background: orange;
+ width: 100px;
+ /* height should stretch to fill parent's height, via
+ * parent's "align-items: stretch" (the default) */
+
+ padding-left: 1px;
+ }
+ </style>
+ <script>
+ function tweak() {
+ var tweakMe = document.getElementById("tweakMe");
+ tweakMe.style.paddingLeft = "0";
+ tweakMe.style.background = "lime";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div id="outerContainer">
+ <div id="tweakMe"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1-ref.xhtml
new file mode 100644
index 0000000000..13e0880c09
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1-ref.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case is like its textcase, but with the testcase's dynamic
+ modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"> <div>[OldText]</div></div>
+ <div class="flexbox" id="f1"><div>[OldText]</div> </div>
+ <div class="flexbox" id="f2">[NewText]<div>[OldText]</div></div>
+ <div class="flexbox" id="f3">[NewText] <div>[OldText]</div></div>
+ <div class="flexbox" id="f4"> [NewText]<div>[OldText]</div></div>
+ <div class="flexbox" id="f5"><div>[OldText]</div>[NewText]</div>
+ <div class="flexbox" id="f6"><div>[OldText]</div>[NewText] </div>
+ <div class="flexbox" id="f7"><div>[OldText]</div> [NewText]</div>
+ <div class="flexbox" id="f8">[NewText] <div>[OldText]</div></div>
+ <div class="flexbox" id="f9"> [NewText]<div>[OldText]</div></div>
+ <div class="flexbox" id="f10"><div>[OldText]</div>[NewText] </div>
+ <div class="flexbox" id="f11"><div>[OldText]</div> [NewText]</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.xhtml
new file mode 100644
index 0000000000..e271f4fb3e
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.xhtml
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we reconstruct frames as necessary, after content
+ (including whitespace & text) is dynamically inserted as a child of a
+ flexbox. (Note that in cases where we know the whitespace is going to be
+ dropped, we don't bother reconstructing frames. This test is to be sure we
+ aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function tweak() {
+ // Just inserting whitespace
+ // -------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f0");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f1");
+
+ // Inserting text or text with whitespace
+ // --------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f2");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 0, "f4");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 1, "f6");
+ insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 1, "f7");
+
+ // Same as the whitespace cases immediately above, but now with separate
+ // text nodes for the whitespace vs. the text
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f8");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f8");
+
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f9");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f9");
+
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f10");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f10");
+
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f11");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f11");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"><div>[OldText]</div></div>
+ <div class="flexbox" id="f1"><div>[OldText]</div></div>
+ <div class="flexbox" id="f2"><div>[OldText]</div></div>
+ <div class="flexbox" id="f3"><div>[OldText]</div></div>
+ <div class="flexbox" id="f4"><div>[OldText]</div></div>
+ <div class="flexbox" id="f5"><div>[OldText]</div></div>
+ <div class="flexbox" id="f6"><div>[OldText]</div></div>
+ <div class="flexbox" id="f7"><div>[OldText]</div></div>
+ <div class="flexbox" id="f8"><div>[OldText]</div></div>
+ <div class="flexbox" id="f9"><div>[OldText]</div></div>
+ <div class="flexbox" id="f10"><div>[OldText]</div></div>
+ <div class="flexbox" id="f11"><div>[OldText]</div></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2-ref.xhtml
new file mode 100644
index 0000000000..db3860fcef
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2-ref.xhtml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case is like its textcase, but with the testcase's dynamic
+ modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ <!-- to make inserted div elements stand out -->
+ div.inserted { background: teal; }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox" id="f8"><div class="inserted">[NewDiv]</div><div>[OldText]</div></div>
+ <div class="flexbox" id="f9"><div>[OldText]</div><div class="inserted">[NewDiv]</div></div>
+ <div class="flexbox" id="f10"><div class="inserted">[NewDiv]</div> <div>[OldText]</div></div>
+ <div class="flexbox" id="f11"> <div class="inserted">[NewDiv]</div><div>[OldText]</div></div>
+ <div class="flexbox" id="f12"><div>[OldText]</div><div class="inserted">[NewDiv]</div> </div>
+ <div class="flexbox" id="f13"><div>[OldText]</div> <div class="inserted">[NewDiv]</div></div>
+ <div class="flexbox" id="f14"><div class="inserted">[NewDiv]</div>[NewText]<div>[OldText]</div></div>
+ <div class="flexbox" id="f15">[NewText]<div class="inserted">[NewDiv]</div><div>[OldText]</div></div>
+ <div class="flexbox" id="f16"><div>[OldText]</div><div class="inserted">[NewDiv]</div>[NewText]</div>
+ <div class="flexbox" id="f17"><div>[OldText]</div>[NewText]<div class="inserted">[NewDiv]</div></div>
+ </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2.xhtml
new file mode 100644
index 0000000000..b083ccd5f9
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-2.xhtml
@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we reconstruct frames as necessary, after content
+ (including whitespace & divs) is dynamically inserted as a child of a
+ flexbox. (Note that in cases where we know the whitespace is going to be
+ dropped, we don't bother reconstructing frames. This test is to be sure we
+ aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ <!-- to make inserted div elements stand out -->
+ div.inserted { background: teal; }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function createDivElem() {
+ var div = document.createElement("div");
+ div.setAttribute("class", "inserted");
+ div.appendChild(document.createTextNode("[NewDiv]"));
+ return div;
+ }
+
+ function tweak() {
+ // Inserting div, adjacent to inline content
+ // -----------------------------------------
+ insertNodeAtPosnInElem(createDivElem(), 0, "f0");
+ insertNodeAtPosnInElem(createDivElem(), 1, "f1");
+
+ // Inserting div and whitespace, before inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
+ insertNodeAtPosnInElem(createDivElem(), 0, "f2");
+
+ insertNodeAtPosnInElem(createDivElem(), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
+
+ // Inserting div and whitespace, after inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
+ insertNodeAtPosnInElem(createDivElem(), 1, "f4");
+
+ insertNodeAtPosnInElem(createDivElem(), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
+
+ // Inserting div and text, before inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+ insertNodeAtPosnInElem(createDivElem(), 0, "f6");
+
+ insertNodeAtPosnInElem(createDivElem(), 0, "f7");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+ // Inserting div and text, after inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+ insertNodeAtPosnInElem(createDivElem(), 1, "f8");
+
+ insertNodeAtPosnInElem(createDivElem(), 1, "f9");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"><div>[OldText]</div></div>
+ <div class="flexbox" id="f1"><div>[OldText]</div></div>
+ <div class="flexbox" id="f2"><div>[OldText]</div></div>
+ <div class="flexbox" id="f3"><div>[OldText]</div></div>
+ <div class="flexbox" id="f4"><div>[OldText]</div></div>
+ <div class="flexbox" id="f5"><div>[OldText]</div></div>
+ <div class="flexbox" id="f6"><div>[OldText]</div></div>
+ <div class="flexbox" id="f7"><div>[OldText]</div></div>
+ <div class="flexbox" id="f8"><div>[OldText]</div></div>
+ <div class="flexbox" id="f9"><div>[OldText]</div></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3-ref.xhtml
new file mode 100644
index 0000000000..b29b16f186
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3-ref.xhtml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case is like its textcase, but with the testcase's dynamic
+ modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ <!-- to make inserted span elements stand out -->
+ span.inserted { background: teal; }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"><span class="inserted">[NewSpan]</span><div>[OldText]</div></div>
+ <div class="flexbox" id="f1"><div>[OldText]</div><span class="inserted">[NewSpan]</span></div>
+ <div class="flexbox" id="f2"><span class="inserted">[NewSpan]</span> <div>[OldText]</div></div>
+ <div class="flexbox" id="f3"> <span class="inserted">[NewSpan]</span><div>[OldText]</div></div>
+ <div class="flexbox" id="f4"><div>[OldText]</div><span class="inserted">[NewSpan]</span> </div>
+ <div class="flexbox" id="f5"><div>[OldText]</div> <span class="inserted">[NewSpan]</span></div>
+ <div class="flexbox" id="f6"><span class="inserted">[NewSpan]</span>[NewText]<div>[OldText]</div></div>
+ <div class="flexbox" id="f7">[NewText]<span class="inserted">[NewSpan]</span><div>[OldText]</div></div>
+ <div class="flexbox" id="f8"><div>[OldText]</div><span class="inserted">[NewSpan]</span>[NewText]</div>
+ <div class="flexbox" id="f9"><div>[OldText]</div>[NewText]<span class="inserted">[NewSpan]</span></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3.xhtml
new file mode 100644
index 0000000000..faf54917de
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-3.xhtml
@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we reconstruct frames as necessary, after content
+ (including whitespace & spans) is dynamically inserted as a child of a
+ flexbox. (Note that in cases where we know the whitespace is going to be
+ dropped, we don't bother reconstructing frames. This test is to be sure we
+ aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ <!-- to make inserted span elements stand out -->
+ span.inserted { background: teal; }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function createSpanElem() {
+ var span = document.createElement("span");
+ span.setAttribute("class", "inserted");
+ span.appendChild(document.createTextNode("[NewSpan]"));
+ return span;
+ }
+
+ function tweak() {
+ // Inserting span, on either side of existing content
+ // --------------------------------------------------
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f0");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f1");
+
+ // Inserting span and whitespace, before existing content
+ // ------------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f2");
+
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
+
+ // Inserting span and whitespace, after existing content
+ // -----------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f4");
+
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
+
+ // Inserting span and text, before existing content
+ // ------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f6");
+
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f7");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+ // Inserting span and text, after existing content
+ // -----------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f8");
+
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f9");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"><div>[OldText]</div></div>
+ <div class="flexbox" id="f1"><div>[OldText]</div></div>
+ <div class="flexbox" id="f2"><div>[OldText]</div></div>
+ <div class="flexbox" id="f3"><div>[OldText]</div></div>
+ <div class="flexbox" id="f4"><div>[OldText]</div></div>
+ <div class="flexbox" id="f5"><div>[OldText]</div></div>
+ <div class="flexbox" id="f6"><div>[OldText]</div></div>
+ <div class="flexbox" id="f7"><div>[OldText]</div></div>
+ <div class="flexbox" id="f8"><div>[OldText]</div></div>
+ <div class="flexbox" id="f9"><div>[OldText]</div></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-1.xhtml
new file mode 100644
index 0000000000..785063fdf7
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-1.xhtml
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we reconstruct frames as necessary, after content
+ (including whitespace & text) is dynamically inserted as a child of a
+ flexbox. (Note that in cases where we know the whitespace is going to be
+ dropped, we don't bother reconstructing frames. This test is to be sure we
+ aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function tweak() {
+ // Just inserting whitespace
+ // -------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f0");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f1");
+
+ // Inserting text or text with whitespace
+ // --------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f2");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 0, "f4");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 1, "f6");
+ insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 1, "f7");
+
+ // Same as the whitespace cases immediately above, but now with separate
+ // text nodes for the whitespace vs. the text
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f8");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f8");
+
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f9");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f9");
+
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f10");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f10");
+
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f11");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f11");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"><span>[OldText]</span></div>
+ <div class="flexbox" id="f1"><span>[OldText]</span></div>
+ <div class="flexbox" id="f2"><span>[OldText]</span></div>
+ <div class="flexbox" id="f3"><span>[OldText]</span></div>
+ <div class="flexbox" id="f4"><span>[OldText]</span></div>
+ <div class="flexbox" id="f5"><span>[OldText]</span></div>
+ <div class="flexbox" id="f6"><span>[OldText]</span></div>
+ <div class="flexbox" id="f7"><span>[OldText]</span></div>
+ <div class="flexbox" id="f8"><span>[OldText]</span></div>
+ <div class="flexbox" id="f9"><span>[OldText]</span></div>
+ <div class="flexbox" id="f10"><span>[OldText]</span></div>
+ <div class="flexbox" id="f11"><span>[OldText]</span></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-2.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-2.xhtml
new file mode 100644
index 0000000000..9c82796620
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-2.xhtml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we reconstruct frames as necessary, after content
+ (including whitespace & divs) is dynamically inserted as a child of a
+ flexbox. (Note that in cases where we know the whitespace is going to be
+ dropped, we don't bother reconstructing frames. This test is to be sure we
+ aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body {
+ font-size: 10px;
+ }
+
+ div.inserted {
+ background: teal; /* To make inserted div elements stand out. */
+ }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function createDivElem() {
+ var div = document.createElement("div");
+ div.setAttribute("class", "inserted");
+ div.appendChild(document.createTextNode("[NewDiv]"));
+ return div;
+ }
+
+ function tweak() {
+ // Inserting div, adjacent to inline content
+ // -----------------------------------------
+ insertNodeAtPosnInElem(createDivElem(), 0, "f0");
+ insertNodeAtPosnInElem(createDivElem(), 1, "f1");
+
+ // Inserting div and whitespace, before inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
+ insertNodeAtPosnInElem(createDivElem(), 0, "f2");
+
+ insertNodeAtPosnInElem(createDivElem(), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
+
+ // Inserting div and whitespace, after inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
+ insertNodeAtPosnInElem(createDivElem(), 1, "f4");
+
+ insertNodeAtPosnInElem(createDivElem(), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
+
+ // Inserting div and text, before inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+ insertNodeAtPosnInElem(createDivElem(), 0, "f6");
+
+ insertNodeAtPosnInElem(createDivElem(), 0, "f7");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+ // Inserting div and text, after inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+ insertNodeAtPosnInElem(createDivElem(), 1, "f8");
+
+ insertNodeAtPosnInElem(createDivElem(), 1, "f9");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"><span>[OldText]</span></div>
+ <div class="flexbox" id="f1"><span>[OldText]</span></div>
+ <div class="flexbox" id="f2"><span>[OldText]</span></div>
+ <div class="flexbox" id="f3"><span>[OldText]</span></div>
+ <div class="flexbox" id="f4"><span>[OldText]</span></div>
+ <div class="flexbox" id="f5"><span>[OldText]</span></div>
+ <div class="flexbox" id="f6"><span>[OldText]</span></div>
+ <div class="flexbox" id="f7"><span>[OldText]</span></div>
+ <div class="flexbox" id="f8"><span>[OldText]</span></div>
+ <div class="flexbox" id="f9"><span>[OldText]</span></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml
new file mode 100644
index 0000000000..9f60c43160
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we reconstruct frames as necessary, after content
+ (including whitespace & spans) is dynamically inserted as a child of a
+ flexbox. (Note that in cases where we know the whitespace is going to be
+ dropped, we don't bother reconstructing frames. This test is to be sure we
+ aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body {
+ font-size: 10px;
+ }
+
+ span.inserted {
+ background: teal; /* To make inserted span elements stand out. */
+ }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function createSpanElem() {
+ var span = document.createElement("span");
+ span.setAttribute("class", "inserted");
+ span.appendChild(document.createTextNode("[NewSpan]"));
+ return span;
+ }
+
+ function tweak() {
+ // Inserting span, on either side of existing content
+ // --------------------------------------------------
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f0");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f1");
+
+ // Inserting span and whitespace, before existing content
+ // ------------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f2");
+
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
+
+ // Inserting span and whitespace, after existing content
+ // -----------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f4");
+
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
+
+ // Inserting span and text, before existing content
+ // ------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f6");
+
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f7");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+ // Inserting span and text, after existing content
+ // -----------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f8");
+
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f9");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"><span>[OldText]</span></div>
+ <div class="flexbox" id="f1"><span>[OldText]</span></div>
+ <div class="flexbox" id="f2"><span>[OldText]</span></div>
+ <div class="flexbox" id="f3"><span>[OldText]</span></div>
+ <div class="flexbox" id="f4"><span>[OldText]</span></div>
+ <div class="flexbox" id="f5"><span>[OldText]</span></div>
+ <div class="flexbox" id="f6"><span>[OldText]</span></div>
+ <div class="flexbox" id="f7"><span>[OldText]</span></div>
+ <div class="flexbox" id="f8"><span>[OldText]</span></div>
+ <div class="flexbox" id="f9"><span>[OldText]</span></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1-ref.xhtml
new file mode 100644
index 0000000000..536a9fa83e
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1-ref.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case is like its textcase, but with the testcase's dynamic
+ modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"> [OldText]</div>
+ <div class="flexbox" id="f1">[OldText] </div>
+ <div class="flexbox" id="f2">[NewText][OldText]</div>
+ <div class="flexbox" id="f3">[NewText] [OldText]</div>
+ <div class="flexbox" id="f4"> [NewText][OldText]</div>
+ <div class="flexbox" id="f5">[OldText][NewText]</div>
+ <div class="flexbox" id="f6">[OldText][NewText] </div>
+ <div class="flexbox" id="f7">[OldText] [NewText]</div>
+ <div class="flexbox" id="f8">[NewText] [OldText]</div>
+ <div class="flexbox" id="f9"> [NewText][OldText]</div>
+ <div class="flexbox" id="f10">[OldText][NewText] </div>
+ <div class="flexbox" id="f11">[OldText] [NewText]</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1.xhtml
new file mode 100644
index 0000000000..37f63136a7
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-1.xhtml
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we reconstruct frames as necessary, after content
+ (including whitespace & text) is dynamically inserted as a child of a
+ flexbox. (Note that in cases where we know the whitespace is going to be
+ dropped, we don't bother reconstructing frames. This test is to be sure we
+ aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function tweak() {
+ // Just inserting whitespace
+ // -------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f0");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f1");
+
+ // Inserting text or text with whitespace
+ // --------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f2");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 0, "f4");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText] "), 1, "f6");
+ insertNodeAtPosnInElem(document.createTextNode(" [NewText]"), 1, "f7");
+
+ // Same as the whitespace cases immediately above, but now with separate
+ // text nodes for the whitespace vs. the text
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f8");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f8");
+
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f9");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f9");
+
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f10");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f10");
+
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f11");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f11");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0">[OldText]</div>
+ <div class="flexbox" id="f1">[OldText]</div>
+ <div class="flexbox" id="f2">[OldText]</div>
+ <div class="flexbox" id="f3">[OldText]</div>
+ <div class="flexbox" id="f4">[OldText]</div>
+ <div class="flexbox" id="f5">[OldText]</div>
+ <div class="flexbox" id="f6">[OldText]</div>
+ <div class="flexbox" id="f7">[OldText]</div>
+ <div class="flexbox" id="f8">[OldText]</div>
+ <div class="flexbox" id="f9">[OldText]</div>
+ <div class="flexbox" id="f10">[OldText]</div>
+ <div class="flexbox" id="f11">[OldText]</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2-ref.xhtml
new file mode 100644
index 0000000000..7e3468b1f3
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2-ref.xhtml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case is like its textcase, but with the testcase's dynamic
+ modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body {
+ font-size: 10px;
+ }
+
+ div.inserted {
+ background: teal; /* To make inserted div elements stand out. */
+ }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox" id="f8"><div class="inserted">[NewDiv]</div>[OldText]</div>
+ <div class="flexbox" id="f9">[OldText]<div class="inserted">[NewDiv]</div></div>
+ <div class="flexbox" id="f10"><div class="inserted">[NewDiv]</div> [OldText]</div>
+ <div class="flexbox" id="f11"> <div class="inserted">[NewDiv]</div>[OldText]</div>
+ <div class="flexbox" id="f12">[OldText]<div class="inserted">[NewDiv]</div> </div>
+ <div class="flexbox" id="f13">[OldText] <div class="inserted">[NewDiv]</div></div>
+ <div class="flexbox" id="f14"><div class="inserted">[NewDiv]</div>[NewText][OldText]</div>
+ <div class="flexbox" id="f15">[NewText]<div class="inserted">[NewDiv]</div>[OldText]</div>
+ <div class="flexbox" id="f16">[OldText]<div class="inserted">[NewDiv]</div>[NewText]</div>
+ <div class="flexbox" id="f17">[OldText][NewText]<div class="inserted">[NewDiv]</div></div>
+ </body>
+</html>
+
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2.xhtml
new file mode 100644
index 0000000000..b907af8b57
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-2.xhtml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we reconstruct frames as necessary, after content
+ (including whitespace & divs) is dynamically inserted as a child of a
+ flexbox. (Note that in cases where we know the whitespace is going to be
+ dropped, we don't bother reconstructing frames. This test is to be sure we
+ aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body {
+ font-size: 10px;
+ }
+
+ div.inserted {
+ background: teal; /* To make inserted div elements stand out. */
+ }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function createDivElem() {
+ var div = document.createElement("div");
+ div.setAttribute("class", "inserted");
+ div.appendChild(document.createTextNode("[NewDiv]"));
+ return div;
+ }
+
+ function tweak() {
+ // Inserting div, adjacent to inline content
+ // -----------------------------------------
+ insertNodeAtPosnInElem(createDivElem(), 0, "f0");
+ insertNodeAtPosnInElem(createDivElem(), 1, "f1");
+
+ // Inserting div and whitespace, before inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
+ insertNodeAtPosnInElem(createDivElem(), 0, "f2");
+
+ insertNodeAtPosnInElem(createDivElem(), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
+
+ // Inserting div and whitespace, after inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
+ insertNodeAtPosnInElem(createDivElem(), 1, "f4");
+
+ insertNodeAtPosnInElem(createDivElem(), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
+
+ // Inserting div and text, before inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+ insertNodeAtPosnInElem(createDivElem(), 0, "f6");
+
+ insertNodeAtPosnInElem(createDivElem(), 0, "f7");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+ // Inserting div and text, after inline content
+ // ---------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+ insertNodeAtPosnInElem(createDivElem(), 1, "f8");
+
+ insertNodeAtPosnInElem(createDivElem(), 1, "f9");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0">[OldText]</div>
+ <div class="flexbox" id="f1">[OldText]</div>
+ <div class="flexbox" id="f2">[OldText]</div>
+ <div class="flexbox" id="f3">[OldText]</div>
+ <div class="flexbox" id="f4">[OldText]</div>
+ <div class="flexbox" id="f5">[OldText]</div>
+ <div class="flexbox" id="f6">[OldText]</div>
+ <div class="flexbox" id="f7">[OldText]</div>
+ <div class="flexbox" id="f8">[OldText]</div>
+ <div class="flexbox" id="f9">[OldText]</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3-ref.xhtml
new file mode 100644
index 0000000000..45d357ab87
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3-ref.xhtml
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case is like its textcase, but with the testcase's dynamic
+ modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body {
+ font-size: 10px;
+ }
+
+ span.inserted {
+ background: teal; /* To make inserted span elements stand out. */
+ }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"><span class="inserted">[NewSpan]</span>[OldText]</div>
+ <div class="flexbox" id="f1">[OldText]<span class="inserted">[NewSpan]</span></div>
+ <div class="flexbox" id="f2"><span class="inserted">[NewSpan]</span> [OldText]</div>
+ <div class="flexbox" id="f3"> <span class="inserted">[NewSpan]</span>[OldText]</div>
+ <div class="flexbox" id="f4">[OldText]<span class="inserted">[NewSpan]</span> </div>
+ <div class="flexbox" id="f5">[OldText] <span class="inserted">[NewSpan]</span></div>
+ <div class="flexbox" id="f6"><span class="inserted">[NewSpan]</span>[NewText][OldText]</div>
+ <div class="flexbox" id="f7">[NewText]<span class="inserted">[NewSpan]</span>[OldText]</div>
+ <div class="flexbox" id="f8">[OldText]<span class="inserted">[NewSpan]</span>[NewText]</div>
+ <div class="flexbox" id="f9">[OldText][NewText]<span class="inserted">[NewSpan]</span></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3.xhtml
new file mode 100644
index 0000000000..eca09eb851
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertAroundText-3.xhtml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we reconstruct frames as necessary, after content
+ (including whitespace & spans) is dynamically inserted as a child of a
+ flexbox. (Note that in cases where we know the whitespace is going to be
+ dropped, we don't bother reconstructing frames. This test is to be sure we
+ aren't overzealous with that optimization.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body {
+ font-size: 10px;
+ }
+
+ span.inserted {
+ background: teal; /* To make inserted span elements stand out. */
+ }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function createSpanElem() {
+ var span = document.createElement("span");
+ span.setAttribute("class", "inserted");
+ span.appendChild(document.createTextNode("[NewSpan]"));
+ return span;
+ }
+
+ function tweak() {
+ // Inserting span, on either side of existing content
+ // --------------------------------------------------
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f0");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f1");
+
+ // Inserting span and whitespace, before existing content
+ // ------------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f2");
+
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
+
+ // Inserting span and whitespace, after existing content
+ // -----------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f4");
+
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
+
+ // Inserting span and text, before existing content
+ // ------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f6");
+
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f7");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+ // Inserting span and text, after existing content
+ // -----------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f8");
+
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f9");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0">[OldText]</div>
+ <div class="flexbox" id="f1">[OldText]</div>
+ <div class="flexbox" id="f2">[OldText]</div>
+ <div class="flexbox" id="f3">[OldText]</div>
+ <div class="flexbox" id="f4">[OldText]</div>
+ <div class="flexbox" id="f5">[OldText]</div>
+ <div class="flexbox" id="f6">[OldText]</div>
+ <div class="flexbox" id="f7">[OldText]</div>
+ <div class="flexbox" id="f8">[OldText]</div>
+ <div class="flexbox" id="f9">[OldText]</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1-ref.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1-ref.xhtml
new file mode 100644
index 0000000000..0c0f9b5baa
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1-ref.xhtml
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case is like its textcase, but with the testcase's dynamic
+ modifications already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ <!-- to make inserted span elements stand out -->
+ span {
+ background: teal;
+ padding: 3px;
+ }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox" id="f0"><span/>[orig]</div>
+ <div class="flexbox" id="f1">[orig]<span/></div>
+ <div class="flexbox" id="f2"><span/> [orig]</div>
+ <div class="flexbox" id="f3"> <span/>[orig]</div>
+ <div class="flexbox" id="f4">[orig]<span/> </div>
+ <div class="flexbox" id="f5">[orig] <span/></div>
+ <div class="flexbox" id="f6"><span/>[NewText][orig]</div>
+ <div class="flexbox" id="f7">[NewText]<span/>[orig]</div>
+ <div class="flexbox" id="f8">[orig]<span/>[NewText]</div>
+ <div class="flexbox" id="f9">[orig][NewText]<span/></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1.xhtml b/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1.xhtml
new file mode 100644
index 0000000000..9bcd133529
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-dyn-insertEmptySpan-1.xhtml
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test is a variant of flexbox-dyn-insertAroundText-3.xhtml with the
+ inserted spans being empty & having padding. This triggered invalidation
+ issues with an older work-in-progress patch, so I'm adding this reftest to
+ track that issue & prevent it from regressing.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ body { font-size: 10px; }
+
+ <!-- to make inserted span elements stand out -->
+ span {
+ background: teal;
+ padding: 3px;
+ }
+
+ div.flexbox {
+ border: 1px dashed blue;
+ width: 300px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 1px;
+ white-space: pre;
+ }
+ </style>
+ <script>
+ function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
+ var parent = document.getElementById(aParentId);
+ var insertBeforeTarget = parent.firstChild;
+ for (var i = 0; i &lt; aPosn; i++) {
+ insertBeforeTarget = insertBeforeTarget.nextSibling;
+ }
+ parent.insertBefore(aNodeToInsert, insertBeforeTarget);
+ }
+
+ function createSpanElem() {
+ return document.createElement("span");
+ }
+
+ function tweak() {
+ // Inserting span, on either side of existing content
+ // --------------------------------------------------
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f0");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f1");
+
+ // Inserting span and whitespace, before existing content
+ // ------------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f2");
+
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f3");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
+
+ // Inserting span and whitespace, after existing content
+ // -----------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f4");
+
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f5");
+ insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
+
+ // Inserting span and text, before existing content
+ // ------------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f6");
+
+ insertNodeAtPosnInElem(createSpanElem(), 0, "f7");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
+
+ // Inserting span and text, after existing content
+ // -----------------------------------------------
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f8");
+
+ insertNodeAtPosnInElem(createSpanElem(), 1, "f9");
+ insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <div class="flexbox" id="f0">[orig]</div>
+ <div class="flexbox" id="f1">[orig]</div>
+ <div class="flexbox" id="f2">[orig]</div>
+ <div class="flexbox" id="f3">[orig]</div>
+ <div class="flexbox" id="f4">[orig]</div>
+ <div class="flexbox" id="f5">[orig]</div>
+ <div class="flexbox" id="f6">[orig]</div>
+ <div class="flexbox" id="f7">[orig]</div>
+ <div class="flexbox" id="f8">[orig]</div>
+ <div class="flexbox" id="f9">[orig]</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-empty-1-ref.xhtml b/layout/reftests/flexbox/flexbox-empty-1-ref.xhtml
new file mode 100644
index 0000000000..78810b1ce6
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-empty-1-ref.xhtml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for behavior of flex containers that have no children -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ border: 1px dotted blue;
+ background: yellow;
+ }
+
+ div.withPadding {
+ padding: 2px 3px 4px 5px;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox"/>
+ <div class="flexbox" style="width: 5px"/>
+ <div class="flexbox" style="width: -moz-available"/>
+ <div class="flexbox" style="width: max-content"/>
+ <div class="flexbox" style="width: min-content"/>
+ <div class="flexbox" style="height: 6px"/>
+ <div class="flexbox" style="width: 7px; height: 8px"/>
+
+ <!-- now with padding -->
+ <div class="flexbox withPadding"/>
+ <div class="flexbox withPadding" style="width: 5px"/>
+ <div class="flexbox withPadding" style="width: -moz-available"/>
+ <div class="flexbox withPadding" style="width: max-content"/>
+ <div class="flexbox withPadding" style="width: min-content"/>
+ <div class="flexbox withPadding" style="height: 6px"/>
+ <div class="flexbox withPadding" style="width: 7px; height: 8px"/>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-empty-1a.xhtml b/layout/reftests/flexbox/flexbox-empty-1a.xhtml
new file mode 100644
index 0000000000..b0b578b165
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-empty-1a.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for behavior of flex containers that have no children -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ border: 1px dotted blue;
+ background: yellow;
+ display: flex;
+ }
+
+ div.withPadding {
+ padding: 2px 3px 4px 5px;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox"/>
+ <div class="flexbox" style="width: 5px"/>
+ <div class="flexbox" style="width: -moz-available"/>
+ <div class="flexbox" style="width: max-content"/>
+ <div class="flexbox" style="width: min-content"/>
+ <div class="flexbox" style="height: 6px"/>
+ <div class="flexbox" style="width: 7px; height: 8px"/>
+
+ <!-- now with padding -->
+ <div class="flexbox withPadding"/>
+ <div class="flexbox withPadding" style="width: 5px"/>
+ <div class="flexbox withPadding" style="width: -moz-available"/>
+ <div class="flexbox withPadding" style="width: max-content"/>
+ <div class="flexbox withPadding" style="width: min-content"/>
+ <div class="flexbox withPadding" style="height: 6px"/>
+ <div class="flexbox withPadding" style="width: 7px; height: 8px"/>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-empty-1b.xhtml b/layout/reftests/flexbox/flexbox-empty-1b.xhtml
new file mode 100644
index 0000000000..c64f236d43
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-empty-1b.xhtml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Testcase for behavior of flex containers that have no children. This
+ testcase differs from the "1a" variant in that it's got a single space
+ inside each flex container (which should be ignored, since the flexbox
+ spec says we shouldn't create a flex item for an entirely-whitespace run
+ of inline content).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ border: 1px dotted blue;
+ background: yellow;
+ display: flex;
+ }
+
+ div.withPadding {
+ padding: 2px 3px 4px 5px;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox"> </div>
+ <div class="flexbox" style="width: 5px"> </div>
+ <div class="flexbox" style="width: -moz-available"> </div>
+ <div class="flexbox" style="width: max-content"> </div>
+ <div class="flexbox" style="width: min-content"> </div>
+ <div class="flexbox" style="height: 6px"> </div>
+ <div class="flexbox" style="width: 7px; height: 8px"> </div>
+
+ <!-- now with padding -->
+ <div class="flexbox withPadding"> </div>
+ <div class="flexbox withPadding" style="width: 5px"> </div>
+ <div class="flexbox withPadding" style="width: -moz-available"> </div>
+ <div class="flexbox withPadding" style="width: max-content"> </div>
+ <div class="flexbox withPadding" style="width: min-content"> </div>
+ <div class="flexbox withPadding" style="height: 6px"> </div>
+ <div class="flexbox withPadding" style="width: 7px; height: 8px"> </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001-ref.html b/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001-ref.html
new file mode 100644
index 0000000000..8a302da771
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference: Synthesized flex container baseline.</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1313811">
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+.ib {
+ display: inline-block;
+}
+.ig {
+ display: inline-grid;
+}
+.ib, .ig {
+ border-style: solid;
+ border-width: 3px 1px 5px 1px;
+ padding: 7px 10px 3px 8px;
+ margin: 5px 3px 2px 1px;
+}
+</style>
+
+</head><body>
+
+<pre>Inline-level context:</pre>
+Flexbox:<div class="ib"></div>
+Block:<div class="ig"></div>
+
+<pre>Grid-level context:</pre>
+<div style="display:inline-grid; grid-auto-flow:column; align-items:baseline; justify-items:start">
+Flexbox:<div class="ib"></div>
+Block:<div class="ig"></div>
+</div>
+
+<pre>Flexbox-level context:</pre>
+<div style="display:inline-flex; align-items:baseline; justify-items:start">
+Flexbox:<div class="ib" style="margin-bottom:0"></div>
+Block:<div class="ig"></div>
+</div>
+
+</body></html>
diff --git a/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001.html b/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001.html
new file mode 100644
index 0000000000..5f58b18ecc
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Synthesized flex container baseline.</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1313811">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-baselines">
+ <link rel="match" href="flexbox-empty-container-synthesized-baseline-001.html">
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+.ib {
+ display: inline-block;
+}
+.if {
+ display: inline-flex;
+}
+.ib, .if {
+ border-style: solid;
+ border-width: 3px 1px 5px 1px;
+ padding: 7px 10px 3px 8px;
+ margin: 5px 3px 2px 1px;
+}
+</style>
+
+</head><body>
+
+<pre>Inline-level context:</pre>
+Flexbox:<div class="if"></div>
+Block:<div class="ib"></div>
+
+<pre>Grid-level context:</pre>
+<div style="display:inline-grid; grid-auto-flow:column; align-items:baseline; justify-items:start">
+Flexbox:<div class="if"></div>
+Block:<div class="ib" style="margin-bottom:0"></div>
+</div>
+
+<pre>Flexbox-level context:</pre>
+<div style="display:inline-flex; align-items:baseline; justify-items:start">
+Flexbox:<div class="if"></div>
+Block:<div class="ib" style="margin-bottom:0"></div>
+</div>
+
+</body></html>
diff --git a/layout/reftests/flexbox/flexbox-float-1-ref.xhtml b/layout/reftests/flexbox/flexbox-float-1-ref.xhtml
new file mode 100644
index 0000000000..1fd86bafd4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-1-ref.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ display: flex;
+ width: 400px;
+ margin-bottom: 2px;
+ font-family: sans-serif;
+ background: lightgreen;
+ justify-content: space-around;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ aaa<div>[[[</div>bbb
+ </div>
+ <div class="flexbox">
+ aaa<div>]]]</div>bbb
+ </div>
+ <div class="flexbox">
+ aaa<div>[[[</div>
+ </div>
+ <div class="flexbox">
+ aaa<div>]]]</div>
+ </div>
+ <div class="flexbox">
+ <div>[[[</div>bbb
+ </div>
+ <div class="flexbox">
+ <div>]]]</div>bbb
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-1a.xhtml b/layout/reftests/flexbox/flexbox-float-1a.xhtml
new file mode 100644
index 0000000000..e5c336b465
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-1a.xhtml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that 'float' on a direct child of a flexbox won't
+ actually cause it to be floated.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ display: flex;
+ width: 400px;
+ margin-bottom: 2px;
+ font-family: sans-serif;
+ background: lightgreen;
+ justify-content: space-around;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- These cases have a span as a direct child of the flexbox. The span
+ should become display:block (and hence form its own flex item),
+ but it shouldn't actually float.
+ -->
+ <div class="flexbox">
+ aaa<span style="float: left">[[[</span>bbb
+ </div>
+ <div class="flexbox">
+ aaa<span style="float: right">]]]</span>bbb
+ </div>
+ <div class="flexbox">
+ aaa<span style="float: left">[[[</span>
+ </div>
+ <div class="flexbox">
+ aaa<span style="float: right">]]]</span>
+ </div>
+ <div class="flexbox">
+ <span style="float: left">[[[</span>bbb
+ </div>
+ <div class="flexbox">
+ <span style="float: right">]]]</span>bbb
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-1b.xhtml b/layout/reftests/flexbox/flexbox-float-1b.xhtml
new file mode 100644
index 0000000000..d00b5304ee
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-1b.xhtml
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test is like flexbox-float-1a.xhtml, but with the float-styled
+ element already being a block. (Should render the same.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ display: flex;
+ width: 400px;
+ margin-bottom: 2px;
+ font-family: sans-serif;
+ background: lightgreen;
+ justify-content: space-around;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ aaa<div style="float: left">[[[</div>bbb
+ </div>
+ <div class="flexbox">
+ aaa<div style="float: right">]]]</div>bbb
+ </div>
+ <div class="flexbox">
+ aaa<div style="float: left">[[[</div>
+ </div>
+ <div class="flexbox">
+ aaa<div style="float: right">]]]</div>
+ </div>
+ <div class="flexbox">
+ <div style="float: left">[[[</div>bbb
+ </div>
+ <div class="flexbox">
+ <div style="float: right">]]]</div>bbb
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-1c.xhtml b/layout/reftests/flexbox/flexbox-float-1c.xhtml
new file mode 100644
index 0000000000..e906358131
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-1c.xhtml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test is like flexbox-float-1a.xhtml, but with the float-styled
+ element dynamically inserted.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+ <script>
+ function generateFloat(aFloatDirection) {
+ var newElem = document.createElement("span");
+ newElem.setAttribute("style", "float: " + aFloatDirection);
+ newElem.innerHTML = aFloatDirection == "left" ? "[[[" : "]]]";
+ return newElem;
+ }
+
+ function tweak() {
+ var containerList = document.getElementsByClassName("flexbox");
+ for (var i = 0; i &lt; containerList.length; i++) {
+ var container = containerList[i];
+ var newElem = generateFloat(container.getAttribute("floatValToUse"));
+
+ var nodeToInsertBefore;
+ var insertPosn = container.getAttribute("insertPosn");
+ if (insertPosn == "begin") {
+ nodeToInsertBefore = container.firstChild;
+ } else if (insertPosn == "mid") {
+ nodeToInsertBefore = container.firstChild.nextSibling;
+ } else if (insertPosn == "end") {
+ nodeToInsertBefore = null;
+ }
+
+ container.insertBefore(newElem, nodeToInsertBefore);
+ }
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ <style>
+ div.flexbox {
+ display: flex;
+ width: 400px;
+ margin-bottom: 2px;
+ font-family: sans-serif;
+ background: lightgreen;
+ justify-content: space-around;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox" floatValToUse="left" insertPosn="mid">
+ aaa<span>bbb</span>
+ </div>
+ <div class="flexbox" floatValToUse="right" insertPosn="mid">
+ aaa<span>bbb</span>
+ </div>
+ <div class="flexbox" floatValToUse="left" insertPosn="end">
+ aaa
+ </div>
+ <div class="flexbox" floatValToUse="right" insertPosn="end">
+ aaa
+ </div>
+ <div class="flexbox" floatValToUse="left" insertPosn="begin">
+ bbb
+ </div>
+ <div class="flexbox" floatValToUse="right" insertPosn="begin">
+ bbb
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-1d.xhtml b/layout/reftests/flexbox/flexbox-float-1d.xhtml
new file mode 100644
index 0000000000..4fdc493f12
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-1d.xhtml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test is like flexbox-float-1b.xhtml, but with the float-styled
+ element dynamically inserted.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+ <script>
+ function generateFloat(aFloatDirection) {
+ var newElem = document.createElement("div");
+ newElem.setAttribute("style", "float: " + aFloatDirection);
+ newElem.innerHTML = aFloatDirection == "left" ? "[[[" : "]]]";
+ return newElem;
+ }
+
+ function tweak() {
+ var containerList = document.getElementsByClassName("flexbox");
+ for (var i = 0; i &lt; containerList.length; i++) {
+ var container = containerList[i];
+ var newElem = generateFloat(container.getAttribute("floatValToUse"));
+
+ var nodeToInsertBefore;
+ var insertPosn = container.getAttribute("insertPosn");
+ if (insertPosn == "begin") {
+ nodeToInsertBefore = container.firstChild;
+ } else if (insertPosn == "mid") {
+ nodeToInsertBefore = container.firstChild.nextSibling;
+ } else if (insertPosn == "end") {
+ nodeToInsertBefore = null;
+ }
+
+ container.insertBefore(newElem, nodeToInsertBefore);
+ }
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ <style>
+ div.flexbox {
+ display: flex;
+ width: 400px;
+ margin-bottom: 2px;
+ font-family: sans-serif;
+ background: lightgreen;
+ justify-content: space-around;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox" floatValToUse="left" insertPosn="mid">
+ aaa<span>bbb</span>
+ </div>
+ <div class="flexbox" floatValToUse="right" insertPosn="mid">
+ aaa<span>bbb</span>
+ </div>
+ <div class="flexbox" floatValToUse="left" insertPosn="end">
+ aaa
+ </div>
+ <div class="flexbox" floatValToUse="right" insertPosn="end">
+ aaa
+ </div>
+ <div class="flexbox" floatValToUse="left" insertPosn="begin">
+ bbb
+ </div>
+ <div class="flexbox" floatValToUse="right" insertPosn="begin">
+ bbb
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-2-ref.xhtml b/layout/reftests/flexbox/flexbox-float-2-ref.xhtml
new file mode 100644
index 0000000000..c6270dd49b
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-2-ref.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case uses a div with "text-align: center" in place of a
+ flex container, and has the text "lll" and "rrr" already placed at the
+ target position instead of having it positioned with the "float" property.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ text-align: center;
+ font-family: sans-serif;
+ width: 400px;
+ margin-bottom: 2px;
+ background: lightgreen;
+ justify-content: space-around;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ lllaaabbb
+ </div>
+ <div class="flexbox">
+ aaabbbrrr
+ </div>
+
+ <div class="flexbox">
+ lllaaabbb
+ </div>
+ <div class="flexbox">
+ aaabbbrrr
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-2a.xhtml b/layout/reftests/flexbox/flexbox-float-2a.xhtml
new file mode 100644
index 0000000000..817e3fb2c4
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-2a.xhtml
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that 'float' on a grandchild of a flex container _will_
+ cause the element to be floated.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ display: flex;
+ font-family: sans-serif;
+ width: 400px;
+ margin-bottom: 2px;
+ background: lightgreen;
+ justify-content: space-around;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- These cases have a floated span as a grandchild of the flex container.
+ The span should float within its flex item. -->
+ <div class="flexbox">
+ <span>aaa<span style="float: left">lll</span>bbb</span>
+ </div>
+ <div class="flexbox">
+ <span>aaa<span style="float: right">rrr</span>bbb</span>
+ </div>
+
+ <!-- These cases have a floated div as a grandchild of the flex container.
+ The div should float within its flex item. -->
+ <div class="flexbox">
+ <span>aaa<div style="float: left">lll</div>bbb</span>
+ </div>
+ <div class="flexbox">
+ <span>aaa<div style="float: right">rrr</div>bbb</span>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-float-2b.xhtml b/layout/reftests/flexbox/flexbox-float-2b.xhtml
new file mode 100644
index 0000000000..29b9355ee6
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-float-2b.xhtml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that 'float' on a grandchild of a flex container _will_
+ cause the element to be floated.
+
+ This differs from the "2a" variant in that the flex items are <div>s
+ rather than <span>s (though that shouldn't matter, because <span> as a
+ flex item should become "display:block").
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ display: flex;
+ font-family: sans-serif;
+ width: 400px;
+ margin-bottom: 2px;
+ background: lightgreen;
+ justify-content: space-around;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- These cases have a floated span as a grandchild of the flex container.
+ The span should float within its flex item. -->
+ <div class="flexbox">
+ <div>aaa<span style="float: left">lll</span>bbb</div>
+ </div>
+ <div class="flexbox">
+ <div>aaa<span style="float: right">rrr</span>bbb</div>
+ </div>
+
+ <!-- These cases have a floated div as a grandchild of the flex container.
+ The div should float within its flex item. -->
+ <div class="flexbox">
+ <div>aaa<div style="float: left">lll</div>bbb</div>
+ </div>
+ <div class="flexbox">
+ <div>aaa<div style="float: right">rrr</div>bbb</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1-ref.xhtml
new file mode 100644
index 0000000000..b1008e7cc0
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1-ref.xhtml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Reference case, using a table with fixed-size cells instead of a
+ flex container.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <style>
+ table {
+ font: 10px Ahem;
+ height: 100px;
+ width: 200px;
+ }
+ td { vertical-align: top; }
+ td.a {
+ width: 30px;
+ background: lightgreen;
+ }
+ td.b {
+ width: 50px;
+ background: yellow;
+ }
+ td.inflex {
+ width: 20px;
+ background: gray;
+ }
+ </style>
+ </head>
+ <body>
+ <table cellspacing="0" cellpadding="0">
+ <tr>
+ <td class="a"/>
+ <td>text</td>
+ <td class="b"/>
+ <td><i>italic</i></td>
+ <td class="inflex"></td>
+ </tr>
+ </table>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1a.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1a.xhtml
new file mode 100644
index 0000000000..6146e50522
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1a.xhtml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test has static inline content intermixed with flex items,
+ inside a flex container.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <style>
+ div { height: 100px; }
+ div.flexbox {
+ font: 10px Ahem;
+ width: 200px;
+ display: flex;
+ }
+ div.a {
+ flex: 1 0 20px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 30px;
+ background: yellow;
+ }
+ div.inflex {
+ flex: 0 0 20px;
+ background: gray;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox"
+ ><div class="a"/>text<div class="b"/><i>italic</i
+ ><div class="inflex"/></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1b.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1b.xhtml
new file mode 100644
index 0000000000..933b770707
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-1b.xhtml
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test inserts a new div into some inline content in a flex container.
+ That should split the inline content into two flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <script>
+ function tweak() {
+ var flexbox = document.getElementsByClassName("flexbox")[0];
+ var insertionPoint = flexbox.firstChild.nextSibling.nextSibling;
+
+ var newDiv = document.createElement("div");
+ newDiv.setAttribute("class", "b");
+
+ flexbox.insertBefore(newDiv, insertionPoint);
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ <style>
+ div { height: 100px; }
+ div.flexbox {
+ font: 10px Ahem;
+ width: 200px;
+ display: flex;
+ }
+ div.a {
+ flex: 1 0 20px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 30px;
+ background: yellow;
+ }
+ div.inflex {
+ flex: 0 0 20px;
+ background: gray;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox"
+ ><div class="a"/>text<i>italic</i
+ ><div class="inflex"/></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2-ref.xhtml
new file mode 100644
index 0000000000..d1469e79c9
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2-ref.xhtml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Reference case with a stretch of inline content in a flex container.
+ (The corresponding testcase has a div interrupting the run, which gets
+ removed, hopefully making it look like this reference case.)
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div { height: 100px; }
+ div.flexbox {
+ width: 200px;
+ display: flex;
+ }
+ div.a {
+ flex: 1 0 20px;
+ background: lightgreen;
+ }
+ div.inflex {
+ flex: 0 0 20px;
+ background: gray;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox"
+ ><div class="a"/>text<i>italic</i
+ ><div class="inflex"/></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.xhtml
new file mode 100644
index 0000000000..bc0b341526
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.xhtml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test removes a div from the middle of some inline content in a flex
+ container. That should merge the inline content into a single flex item.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <script>
+ function tweak() {
+ var removeMe = document.getElementById("removeMe");
+ removeMe.parentNode.removeChild(removeMe);
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ <style>
+ div { height: 100px; }
+ div.flexbox {
+ width: 200px;
+ display: flex;
+ }
+ div.a {
+ flex: 1 0 20px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 30px;
+ background: yellow;
+ }
+ div.inflex {
+ flex: 0 0 20px;
+ background: gray;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox"
+ ><div class="a"/>text<div class="b" id="removeMe"/><i>italic</i
+ ><div class="inflex"/></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3-ref.xhtml
new file mode 100644
index 0000000000..4c28d8d206
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3-ref.xhtml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Reference case, using a block instead of a flexbox.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <style>
+ div#block {
+ width: 100px;
+ font: 10px Ahem;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="block">abc def ghi jkl mno pqr stu</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3a.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3a.xhtml
new file mode 100644
index 0000000000..2b88ce2ae2
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3a.xhtml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test has a run of text in a flex container, for comparison
+ against the "b" & "c" variants of this test (which use dynamic tweaks).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <style>
+ div#flexbox {
+ width: 100px;
+ display: flex;
+ font: 10px Ahem;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="flexbox">abc def ghi jkl mno pqr stu</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.xhtml
new file mode 100644
index 0000000000..b5d509f18a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3b.xhtml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test inserts a some inline content in a flex container, just before a
+ stretch of existing inline content. The new content should be incorporated
+ into the same anonymous flex item as the existing content.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <script>
+ function tweak() {
+ var newInlineContent = document.createTextNode("abc def ghi");
+
+ var flexbox = document.getElementById("flexbox");
+ flexbox.insertBefore(newInlineContent, flexbox.firstChild);
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ <style>
+ div#flexbox {
+ width: 100px;
+ display: flex;
+ font: 10px Ahem;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="flexbox"> jkl mno pqr stu</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.xhtml
new file mode 100644
index 0000000000..d532372a41
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-3c.xhtml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test inserts a some inline content in a flex container, just after a
+ stretch of existing inline content. The new content should be incorporated
+ into the same anonymous flex item as the existing content.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <script>
+ function tweak() {
+ var newInlineContent = document.createTextNode("mno pqr stu");
+
+ var flexbox = document.getElementById("flexbox");
+ flexbox.insertBefore(newInlineContent, null);
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ <style>
+ div#flexbox {
+ width: 100px;
+ display: flex;
+ font: 10px Ahem;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="flexbox">abc def ghi jkl </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4-ref.xhtml
new file mode 100644
index 0000000000..cbb99ba9f0
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4-ref.xhtml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This reference case simply has text centered within a div. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div {
+ width: 200px;
+ height: 100px;
+ background: lightgreen;
+ text-align: center;
+ }
+ </style>
+ </head>
+ <body>
+ <div>text</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4.xhtml
new file mode 100644
index 0000000000..c7a068d572
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-4.xhtml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that a flex container which only contains text
+ will render correctly. We use justify-content to position the text
+ in the center of the flex container, as a sanity-check to be sure we
+ are in fact getting a flex container.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ background: lightgreen;
+ justify-content: center;
+ display: flex;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">text</div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5-ref.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5-ref.xhtml
new file mode 100644
index 0000000000..9e51122cad
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5-ref.xhtml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case is the same as the corresponding testcase,
+ but with the dynamic removal already performed.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ background: lightgreen;
+ justify-content: space-around;
+ display: flex;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">text<div>div</div></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5.xhtml b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5.xhtml
new file mode 100644
index 0000000000..8338d1871e
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-inlinecontent-horiz-5.xhtml
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test removes a run of inline content from a flexbox, which
+ should trigger the removal of its now-empty anonymous flex item.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <script>
+ function tweak() {
+ var removeMe = document.getElementsByClassName("flexbox")[0].lastChild;
+ removeMe.parentNode.removeChild(removeMe);
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ <style>
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ background: lightgreen;
+ justify-content: space-around;
+ display: flex;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">text<div>div</div>
+ REMOVE ME
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1-ref.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1-ref.xhtml
new file mode 100644
index 0000000000..2e228fd11a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1-ref.xhtml
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Reference case - see documentation in corresponding testcase.
+ This reference uses blocks where the testcase uses flexboxes.
+ They should be sized the same, since they're basically just text
+ with no special flex sizing properties in play.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <style>
+ table {
+ width: 300px;
+ font: 10px Ahem;
+ margin-bottom: 2px;
+ border: 1px dashed black;
+ }
+
+ div.a { background: lightgreen; }
+ div.b { background: lightblue; }
+
+ <!-- helper-classes for assigning pref / min / auto-width to our divs -->
+ div.prefWidth {
+ width: max-content;
+ }
+ div.minWidth {
+ width: min-content;
+ }
+ div.autoWidth {
+ width: auto;
+ }
+ </style>
+</head>
+<body>
+ <!-- both auto width -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+
+ <!-- MIXING MIN WIDTH & AUTO -->
+ <!-- both min width -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- min,auto -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- auto,min -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+
+ <!-- MIXING PREF WIDTH & AUTO -->
+ <!-- both prefWidth (NOTE: makes the table larger than it wants to be -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- pref,auto -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- auto,pref -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+
+ <!-- MIXING PREF WIDTH & MIN WIDTH -->
+ <!-- min,pref -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- pref,min -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.xhtml
new file mode 100644
index 0000000000..dc1ae6f434
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.xhtml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test has a number of tables, each with 2 flexboxes side-by-side,
+ whose "width" values depend on the flexbox's min and/or pref widths.
+
+ There's not enough space for both flexboxes to fit side-by-side, so their
+ width preferences must be balanced This exercises
+ nsFlexContainerFrame::GetPrefWidth() & ::GetMinWidth().
+
+ IN EACH CASE, div.a has these intrinsic widths:
+ Pref width: 2*40 + 1*50 + 2*10 = 150px (2*aaaa + 1*aaaaa + 2*space)
+ Min width: 50px (width of "aaaaa")
+ and div.b has these intrinsic widths:
+ Pref width: 5*20 + 3*10 + 7*10 = 200px (5*bb + 3*b + 7*space)
+ Min width: 20px (width "bb")
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <style>
+ table {
+ width: 300px;
+ font: 10px Ahem;
+ margin-bottom: 2px;
+ border: 1px dashed black;
+ }
+
+ div.a, div.b { display: flex; }
+
+ div.a { background: lightgreen; }
+ div.b { background: lightblue; }
+
+ <!-- helper-classes for assigning pref / min / auto-width to our divs -->
+ div.prefWidth {
+ width: max-content;
+ }
+ div.minWidth {
+ width: min-content;
+ }
+ div.autoWidth {
+ width: auto;
+ }
+ </style>
+</head>
+<body>
+ <!-- both auto width -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+
+ <!-- MIXING MIN WIDTH & AUTO -->
+ <!-- both min width -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- min,auto -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- auto,min -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+
+ <!-- MIXING PREF WIDTH & AUTO -->
+ <!-- both prefWidth (NOTE: makes the table larger than it wants to be -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- pref,auto -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- auto,pref -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+
+ <!-- MIXING PREF WIDTH & MIN WIDTH -->
+ <!-- min,pref -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+ <!-- pref,min -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
+ <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
+ </tr></table>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1b.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1b.xhtml
new file mode 100644
index 0000000000..0d0b1dd34c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1b.xhtml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test has a number of tables, each with 2 flexboxes side-by-side,
+ whose "width" values depend on the flexbox's min and/or pref widths.
+
+ There's not enough space for both flexboxes to fit side-by-side, so their
+ width preferences must be balanced. This exercises
+ nsFlexContainerFrame::GetPrefWidth() & ::GetMinWidth().
+
+ IN EACH CASE, div.a has these intrinsic widths:
+ Pref width: 2*40 + 1*50 + 2*10 = 150px (2*aaaa + 1*aaaaa + 2*space)
+ Min width: 50px (width of "aaaaa")
+ and div.b has these intrinsic widths:
+ Pref width: 5*20 + 3*10 + 7*10 = 200px (5*bb + 3*b + 7*space)
+ Min width: 20px (width "bb")
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+ <style>
+ table {
+ width: 300px;
+ font: 10px Ahem;
+ margin-bottom: 2px;
+ border: 1px dashed black;
+ }
+
+ div.a, div.b { display: flex; }
+
+ div.a { background: lightgreen; }
+ div.b { background: lightblue; }
+
+ <!-- helper-classes for assigning pref / min / auto-width to our divs -->
+ div.prefWidth {
+ width: max-content;
+ }
+ div.minWidth {
+ width: min-content;
+ }
+ div.autoWidth {
+ width: auto;
+ }
+ </style>
+</head>
+<body>
+ <!-- both auto width -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a autoWidth"><div>aaaa aaaa aaaaa</div></div></td>
+ <td><div class="b autoWidth"><div>bb bb b bb bb b bb b</div></div></td>
+ </tr></table>
+
+ <!-- MIXING MIN WIDTH & AUTO -->
+ <!-- both min width -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a minWidth"><div>aaaa aaaa aaaaa</div></div></td>
+ <td><div class="b minWidth"><div>bb bb b bb bb b bb b</div></div></td>
+ </tr></table>
+ <!-- min,auto -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a minWidth"><div>aaaa aaaa aaaaa</div></div></td>
+ <td><div class="b autoWidth"><div>bb bb b bb bb b bb b</div></div></td>
+ </tr></table>
+ <!-- auto,min -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a autoWidth"><div>aaaa aaaa aaaaa</div></div></td>
+ <td><div class="b minWidth"><div>bb bb b bb bb b bb b</div></div></td>
+ </tr></table>
+
+ <!-- MIXING PREF WIDTH & AUTO -->
+ <!-- both prefWidth (NOTE: makes the table larger than it wants to be -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a prefWidth"><div>aaaa aaaa aaaaa</div></div></td>
+ <td><div class="b prefWidth"><div>bb bb b bb bb b bb b</div></div></td>
+ </tr></table>
+ <!-- pref,auto -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a prefWidth"><div>aaaa aaaa aaaaa</div></div></td>
+ <td><div class="b autoWidth"><div>bb bb b bb bb b bb b</div></div></td>
+ </tr></table>
+ <!-- auto,pref -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a autoWidth"><div>aaaa aaaa aaaaa</div></div></td>
+ <td><div class="b prefWidth"><div>bb bb b bb bb b bb b</div></div></td>
+ </tr></table>
+
+ <!-- MIXING PREF WIDTH & MIN WIDTH -->
+ <!-- min,pref -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a minWidth"><div>aaaa aaaa aaaaa</div></div></td>
+ <td><div class="b prefWidth"><div>bb bb b bb bb b bb b</div></div></td>
+ </tr></table>
+ <!-- pref,min -->
+ <table cellpadding="0" cellspacing="0"><tr>
+ <td><div class="a prefWidth"><div>aaaa aaaa aaaaa</div></div></td>
+ <td><div class="b minWidth"><div>bb bb b bb bb b bb b</div></div></td>
+ </tr></table>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2-ref.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2-ref.xhtml
new file mode 100644
index 0000000000..b71ef35d90
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2-ref.xhtml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This reference case has inline blocks in a div, in place of
+ flex items in a flex container.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body { margin: 0; }
+
+ div.flexbox {
+ width: max-content;
+ /* We give the flex container a border and background so we can easily
+ * see how large it is. */
+ border: 2px dotted black;
+ background: lime;
+
+ font-size: 0; /* to prevent whitespace from having an effect */
+ }
+
+ div.wrapper {
+ display: inline-block;
+ border: 5px solid teal;
+ width: 40px;
+ height: 16px;
+ }
+ div.blueBlock {
+ width: 16px;
+ height: 16px;
+ background: rgb(0, 19, 127); /* matches solidblue.png */
+ }
+ </style>
+</head>
+<body>
+ <div class="flexbox">
+ <div class="wrapper"><div class="blueBlock"/></div>
+ <div class="wrapper"><div class="blueBlock"/></div>
+ <div class="wrapper"><div class="blueBlock"/></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2a.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2a.xhtml
new file mode 100644
index 0000000000..40d2f68759
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2a.xhtml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test checks how a flexbox sizes itself to shrinkwrap its contents'
+ preferred sizes.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body { margin: 0; }
+ div.flexbox {
+ display: flex;
+ width: max-content;
+
+ /* We give the flexbox a border and background so we can easily see how
+ * large it is. */
+ border: 2px dotted black;
+ background: lime;
+ }
+
+ div.imgWrapper {
+ border: 5px solid teal;
+ width: 40px;
+ height: 16px;
+ }
+ img {
+ vertical-align: top;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexbox">
+ <div class="imgWrapper"><img src="solidblue.png"/></div>
+ <div class="imgWrapper"><img src="solidblue.png"/></div>
+ <div class="imgWrapper"><img src="solidblue.png"/></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2b.xhtml b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2b.xhtml
new file mode 100644
index 0000000000..29b3a5dfb5
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-2b.xhtml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test is like the -2a variant, but with a <div> instead of an <img>
+ at the deepest level of nesting.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ body { margin: 0; }
+
+ div.flexbox {
+ display: flex;
+ width: max-content;
+
+ /* We give the flex container a border and background so we can easily
+ * see how large it is. */
+ border: 2px dotted black;
+ background: lime;
+ }
+
+ div.wrapper {
+ border: 5px solid teal;
+ width: 40px;
+ height: 16px;
+ }
+ div.blueBlock {
+ width: 16px;
+ height: 16px;
+ background: rgb(0, 19, 127); /* matches solidblue.png */
+ }
+ </style>
+</head>
+<body>
+ <div class="flexbox">
+ <div class="wrapper"><div class="blueBlock"/></div>
+ <div class="wrapper"><div class="blueBlock"/></div>
+ <div class="wrapper"><div class="blueBlock"/></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-invalidation-1-ref.html b/layout/reftests/flexbox/flexbox-invalidation-1-ref.html
new file mode 100644
index 0000000000..a9481b0a78
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-invalidation-1-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Reference case, with testcase's dynamic tweak already performed.
+-->
+<html>
+ <head>
+ <style>
+ div#outer { margin-left: 40px }
+
+ div#flexContainer {
+ width: 100px;
+ height: 50px;
+ background: lightgray;
+ display: flex;
+ justify-content: center;
+ }
+
+ div#flexItem {
+ border: 1px solid black;
+ height: 200%;
+ background: purple;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="flexContainer">
+ <div id="flexItem">item</div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-invalidation-1.html b/layout/reftests/flexbox/flexbox-invalidation-1.html
new file mode 100644
index 0000000000..70d8020bc1
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-invalidation-1.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that we include our children's overflow areas in the
+ flex container's overflow area -- invalidating their old location and new
+ location when the flex container is moved, even if they stick outside the
+ flex container.
+-->
+<html class="reftest-wait">
+ <head>
+ <script>
+ function tweak() {
+ var outer = document.getElementById("outer");
+ outer.style.marginLeft = "40px";
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak);
+ </script>
+ <style>
+ div#flexContainer {
+ width: 100px;
+ height: 50px;
+ background: lightgray;
+ display: flex;
+ justify-content: center;
+ }
+
+ div#flexItem {
+ border: 1px solid black;
+ height: 200%;
+ background: purple;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="outer">
+ <div id="flexContainer">
+ <div id="flexItem">item</div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001-ref.html b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001-ref.html
new file mode 100644
index 0000000000..60b0b9955a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <title>Reference: dynamic change .left on abs.pos. item w. align-self:center</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319">
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.flexbox {
+ display: flex;
+ position: relative;
+ height: 100px;
+}
+
+#item {
+ background: grey;
+ position: relative;
+ align-self: center;
+ left: 20px;
+}
+
+</style>
+</head>
+<body>
+
+<div class="flexbox">
+ <div id="item">X</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001.html b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001.html
new file mode 100644
index 0000000000..9c7b3b4087
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-001.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <title>CSS Flexbox Test: dynamic change .left on abs.pos. item w. align-self:center</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319">
+ <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+ <link rel="match" href="flexbox-item-align-self-dynamic-pos-001-ref.html">
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.flexbox {
+ display: flex;
+ position: relative;
+ height: 100px;
+}
+
+#item {
+ background: grey;
+ position: absolute;
+ align-self: center;
+ left: 10px;
+}
+
+</style>
+</head>
+<body>
+
+<div class="flexbox">
+ <div id="item">X</div>
+</div>
+
+<script>
+ document.body.offsetLeft;
+ var items = Array.prototype.slice.call(document.querySelectorAll('#item'));
+ items.map(item => item.style.left = "20px");
+ document.body.offsetLeft;
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002-ref.html b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002-ref.html
new file mode 100644
index 0000000000..13b3b95021
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <title>Reference: dynamic change .left on abs.pos. item w. align-self:end</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319">
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.flexbox {
+ display: flex;
+ position: relative;
+ height: 100px;
+}
+
+#item {
+ background: grey;
+ position: relative;
+ align-self: end;
+ left: 20px;
+}
+
+</style>
+</head>
+<body>
+
+<div class="flexbox">
+ <div id="item">X</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002.html b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002.html
new file mode 100644
index 0000000000..405ea1b236
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-item-align-self-dynamic-pos-002.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <title>CSS Flexbox Test: dynamic change .left on abs.pos. item w. align-self:end</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319">
+ <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+ <link rel="match" href="flexbox-item-align-self-dynamic-pos-002-ref.html">
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.flexbox {
+ display: flex;
+ height: 100px;
+}
+
+#item {
+ background: grey;
+ position: absolute;
+ align-self: end;
+ left: 10px;
+}
+
+</style>
+</head>
+<body>
+
+<div class="flexbox">
+ <div id="item">X</div>
+</div>
+
+<script>
+ document.body.offsetLeft;
+ var items = Array.prototype.slice.call(document.querySelectorAll('#item'));
+ items.map(item => item.style.left = "20px");
+ document.body.offsetLeft;
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1-ref.html b/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1-ref.html
new file mode 100644
index 0000000000..eb79ba48c5
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Reference Case</title>
+ <meta charset="utf-8">
+ <style>
+ .container {
+ display: flex;
+ flex-direction: row;
+ }
+ .container > * {
+ writing-mode: vertical-lr;
+ border: 1px solid black;
+ }
+ .itemA {
+ background: purple;
+ }
+ .itemB {
+ background: teal;
+ }
+ .itemC {
+ background: blue;
+ }
+ .itemD {
+ background: yellow;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="itemA">itemA</div>
+ <div class="itemB">itemB</div>
+ <div class="itemC">itemC</div>
+ <div class="itemD">itemD</div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1.html b/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1.html
new file mode 100644
index 0000000000..ff3cef0d68
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Test: Testing a horizonal flex container with keywords on min-width</title>
+ <meta charset="utf-8">
+ <style>
+ .container {
+ display: flex;
+ flex-direction: row;
+ }
+ .container > * {
+ writing-mode: vertical-lr;
+ border: 1px solid black;
+ flex-basis: 0;
+ }
+ .itemA {
+ background: purple;
+ min-width: -moz-max-content;
+ min-width: max-content;
+ }
+ .itemB {
+ background: teal;
+ min-width: -moz-min-content;
+ min-width: min-content;
+ }
+ .itemC {
+ background: blue;
+ min-width: -moz-fit-content;
+ min-width: fit-content;
+ }
+ .itemD {
+ background: yellow;
+ min-width: -moz-available;
+ min-width: -webkit-fill-available;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="itemA">itemA</div>
+ <div class="itemB">itemB</div>
+ <div class="itemC">itemC</div>
+ <div class="itemD">itemD</div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1-ref.html b/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1-ref.html
new file mode 100644
index 0000000000..7593db06f7
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Reference Case</title>
+ <meta charset="utf-8">
+ <style>
+ .container {
+ width: -moz-fit-content;
+ }
+ .container > * {
+ border: 1px solid black;
+ }
+ .itemA {
+ background: purple;
+ }
+ .itemB {
+ background: teal;
+ }
+ .itemC {
+ background: blue;
+ }
+ .itemD {
+ background: yellow;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="itemA">itemA</div>
+ <div class="itemB">itemB</div>
+ <div class="itemC">itemC</div>
+ <div class="itemD">itemD</div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1.html b/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1.html
new file mode 100644
index 0000000000..5ebeb0d404
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Test: Testing a vertical flex container with keywords on min-height</title>
+ <meta charset="utf-8">
+ <style>
+ .container {
+ display: flex;
+ width: -moz-fit-content;
+ width: fit-content;
+ flex-direction: column;
+ }
+ .container > * {
+ border: 1px solid black;
+ flex-basis: 0;
+ }
+ .itemA {
+ background: purple;
+ min-height: -moz-max-content;
+ min-height: max-content;
+ }
+ .itemB {
+ background: teal;
+ min-height: -moz-min-content;
+ min-height: min-content;
+ }
+ .itemC {
+ background: blue;
+ min-height: -moz-fit-content;
+ min-height: fit-content;
+ }
+ .itemD {
+ background: yellow;
+ min-height: -moz-available;
+ min-height: -webkit-fill-available;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="itemA">itemA</div>
+ <div class="itemB">itemB</div>
+ <div class="itemC">itemC</div>
+ <div class="itemD">itemD</div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-1-ref.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-1-ref.xhtml
new file mode 100644
index 0000000000..02a2a90cdf
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-1-ref.xhtml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for absolutely positioned children of a flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .abspos {
+ position: absolute;
+ left: 5px;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ }
+ div.a {
+ width: 100%;
+ height: 100px;
+ background: lightgreen;
+ display: inline-block;
+ }
+ div.b {
+ width: 100%;
+ height: 100px;
+ background: yellow;
+ display: inline-block;
+ }
+ div.inflex {
+ width: 20px;
+ height: 100px;
+ background: gray;
+ display: inline-block;
+ }
+ div.noFlexFn {
+ width: 15px;
+ height: 15px;
+ background: teal;
+ display: inline-block;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <!-- First child abspos: -->
+ <div class="flexbox"
+ ><div class="a abspos" style="width: 30px"/><div class="b"/></div>
+ <!-- Second child abspos: -->
+ <div class="flexbox"
+ ><div class="a"/><div class="b abspos" style="width: 20px"/></div>
+ <!-- Middle child abspos: -->
+ <div class="flexbox"
+ ><div class="a" style="width: 80px"
+ /><div class="inflex abspos"
+ /><div class="b" style="width: 120px"/></div>
+ <!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
+ <div class="flexbox"
+ ><div class="inflex" style="margin-left: 15px"
+ /><div class="inflex" style="margin-left: 30px"
+ /><div class="inflex" style="margin-left: 30px"
+ /><div class="noFlexFn abspos"
+ /><div class="inflex" style="margin-left: 30px"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-1.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-1.xhtml
new file mode 100644
index 0000000000..aa89dd714c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-1.xhtml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Testcase with absolutely positioned children of a flex container.
+ This positioning is with respect to the containing block's left edge.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .abspos {
+ position: absolute;
+ left: 5px;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ display: flex;
+ }
+ div.a {
+ flex: 1 0 auto;
+ width: 30px;
+ height: 100px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 auto;
+ width: 20px;
+ height: 100px;
+ background: yellow;
+ }
+ div.inflex {
+ flex: none;
+ width: 20px;
+ height: 100px;
+ background: gray;
+ }
+ div.noFlexFn {
+ width: 15px;
+ height: 15px;
+ background: teal;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <!-- First child abspos: -->
+ <div class="flexbox"><div class="a abspos"/><div class="b"/></div>
+ <!-- Second child abspos: -->
+ <div class="flexbox"><div class="a"/><div class="b abspos"/></div>
+ <!-- Middle child abspos: -->
+ <div class="flexbox"
+ ><div class="a"/><div class="inflex abspos"/><div class="b"/></div>
+ <!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
+ <div class="flexbox" style="justify-content: space-around"
+ ><div class="inflex"/><div class="inflex"/><div class="inflex"
+ /><div class="noFlexFn abspos"/><div class="inflex"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-2-ref.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-2-ref.xhtml
new file mode 100644
index 0000000000..00ebecc30f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-2-ref.xhtml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for absolutely positioned children of a flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .abspos {
+ position: absolute;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ }
+ div.a {
+ width: 100%;
+ height: 100px;
+ background: lightgreen;
+ display: inline-block;
+ }
+ div.b {
+ width: 100%;
+ height: 100px;
+ background: yellow;
+ display: inline-block;
+ }
+ div.inflex {
+ width: 20px;
+ height: 100px;
+ background: gray;
+ display: inline-block;
+ }
+ div.noFlexFn {
+ width: 16px;
+ height: 16px;
+ background: teal;
+ display: inline-block;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <!-- First child abspos: -->
+ <div class="flexbox"
+ ><div class="a abspos" style="width: 30px"/><div class="b"/></div>
+ <!-- Second child abspos: -->
+ <div class="flexbox"
+ ><div class="a"/><div class="b abspos"
+ style="width: 20px; left: 0"/></div>
+ <!-- Middle child abspos: -->
+ <div class="flexbox"
+ ><div class="a" style="width: 80px"
+ /><div class="inflex abspos" style="left: 0"
+ /><div class="b" style="width: 120px"/></div>
+ <!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
+ <div class="flexbox"
+ ><div class="inflex" style="margin-left: 15px"
+ /><div class="inflex" style="margin-left: 30px"
+ /><div class="inflex" style="margin-left: 30px"
+ /><div class="noFlexFn abspos" style="left: 90px"
+ /><div class="inflex" style="margin-left: 30px"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-2.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-2.xhtml
new file mode 100644
index 0000000000..613c57cde5
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-2.xhtml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Testcase with absolutely positioned children of a flex container.
+ In this testcase, we simply specify "position: absolute" without
+ actually doing any positioning, to test the "static position" of these
+ children.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .abspos {
+ position: absolute;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ display: flex;
+ }
+ div.a {
+ flex: 1 0 auto;
+ width: 30px;
+ height: 100px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 auto;
+ width: 20px;
+ height: 100px;
+ background: yellow;
+ }
+ div.inflex {
+ flex: none;
+ width: 20px;
+ height: 100px;
+ background: gray;
+ }
+ div.noFlexFn {
+ width: 16px;
+ height: 16px;
+ background: teal;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <!-- First child abspos: -->
+ <div class="flexbox"><div class="a abspos"/><div class="b"/></div>
+ <!-- Second child abspos: -->
+ <div class="flexbox"><div class="a"/><div class="b abspos"/></div>
+ <!-- Middle child abspos: -->
+ <div class="flexbox"
+ ><div class="a"/><div class="inflex abspos"/><div class="b"/></div>
+ <!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
+ <div class="flexbox" style="justify-content: space-around"
+ ><div class="inflex"/><div class="inflex"/><div class="inflex"
+ /><div class="noFlexFn abspos"/><div class="inflex"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-3-ref.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-3-ref.xhtml
new file mode 100644
index 0000000000..9bafa1506a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-3-ref.xhtml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for absolutely positioned flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ div.flexbox {
+ top: 30px;
+ left: 40px;
+ width: 200px;
+ height: 100px;
+ position: absolute;
+ border: 1px solid black;
+ }
+ div.a {
+ width: 80px;
+ height: 100px;
+ background: lightgreen;
+ display: inline-block;
+ }
+ div.b {
+ width: 120px;
+ height: 100px;
+ background: yellow;
+ display: inline-block;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <div class="flexbox"><div class="a"/><div class="b"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-3.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-3.xhtml
new file mode 100644
index 0000000000..21b8730c4b
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-3.xhtml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Testcase with absolutely positioned flex container.
+ This positioning is with respect to the containing block's left edge.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ div.flexbox {
+ top: 30px;
+ left: 40px;
+ width: 200px;
+ height: 100px;
+ display: flex;
+ position: absolute;
+ border: 1px solid black;
+ }
+ div.a {
+ flex: 1 0 30px;
+ height: 100px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 20px;
+ height: 100px;
+ background: yellow;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <div class="flexbox"><div class="a"/><div class="b"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-4-ref.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-4-ref.xhtml
new file mode 100644
index 0000000000..4c675fa8ee
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-4-ref.xhtml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for absolutely positioned flex container & children. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .abspos {
+ position: absolute;
+ left: 5px;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ top: 30px;
+ left: 40px;
+ width: 200px;
+ height: 100px;
+ position: absolute;
+ border: 1px solid black;
+ }
+ div.a {
+ width: 30px;
+ height: 100px;
+ background: lightgreen;
+ display: inline-block;
+ }
+ div.b {
+ width: 100%;
+ height: 100px;
+ background: yellow;
+ display: inline-block;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <div class="flexbox"
+ ><div class="a abspos"/><div class="b"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-absolute-4.xhtml b/layout/reftests/flexbox/flexbox-position-absolute-4.xhtml
new file mode 100644
index 0000000000..67974fcf67
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-absolute-4.xhtml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Testcase with absolutely positioned flex container & children.
+ The children's positioning is with respect to the flex container.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .abspos {
+ position: absolute;
+ left: 5px;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ top: 30px;
+ left: 40px;
+ width: 200px;
+ height: 100px;
+ display: flex;
+ position: absolute;
+ border: 1px solid black;
+ }
+ div.a {
+ flex: 1 0 auto;
+ width: 30px;
+ height: 100px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 20px;
+ height: 100px;
+ background: yellow;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <div class="flexbox"><div class="a abspos"/><div class="b"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-1-ref.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-1-ref.xhtml
new file mode 100644
index 0000000000..bcd3982e45
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-1-ref.xhtml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for fixed-position children of a flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .fixedpos {
+ position: fixed;
+ left: 5px;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ }
+ div.a {
+ width: 100%;
+ height: 100px;
+ background: lightgreen;
+ display: inline-block;
+ }
+ div.b {
+ width: 100%;
+ height: 100px;
+ background: yellow;
+ display: inline-block;
+ }
+ div.inflex {
+ width: 20px;
+ height: 100px;
+ background: gray;
+ display: inline-block;
+ }
+ div.noFlexFn {
+ width: 15px;
+ height: 15px;
+ background: teal;
+ display: inline-block;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <!-- First child fixedpos: -->
+ <div class="flexbox"
+ ><div class="a fixedpos" style="width: 30px"/><div class="b"/></div>
+ <!-- Second child fixedpos: -->
+ <div class="flexbox"
+ ><div class="a"/><div class="b fixedpos" style="width: 20px"/></div>
+ <!-- Middle child fixedpos: -->
+ <div class="flexbox"
+ ><div class="a" style="width: 80px"
+ /><div class="inflex fixedpos"
+ /><div class="b" style="width: 120px"/></div>
+ <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: -->
+ <div class="flexbox"
+ ><div class="inflex" style="margin-left: 15px"
+ /><div class="inflex" style="margin-left: 30px"
+ /><div class="inflex" style="margin-left: 30px"
+ /><div class="noFlexFn fixedpos"
+ /><div class="inflex" style="margin-left: 30px"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-1.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-1.xhtml
new file mode 100644
index 0000000000..6401fb2cb1
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-1.xhtml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Testcase with fixed-position children of a flex container.
+ The positioning is with respect to the containing block's left edge.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .fixedpos {
+ position: fixed;
+ left: 5px;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ display: flex;
+ }
+ div.a {
+ flex: 1 0 auto;
+ width: 30px;
+ height: 100px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 auto;
+ width: 20px;
+ height: 100px;
+ background: yellow;
+ }
+ div.inflex {
+ flex: none;
+ width: 20px;
+ height: 100px;
+ background: gray;
+ }
+ div.noFlexFn {
+ width: 15px;
+ height: 15px;
+ background: teal;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <!-- First child fixedpos: -->
+ <div class="flexbox"><div class="a fixedpos"/><div class="b"/></div>
+ <!-- Second child fixedpos: -->
+ <div class="flexbox"><div class="a"/><div class="b fixedpos"/></div>
+ <!-- Middle child fixedpos: -->
+ <div class="flexbox"
+ ><div class="a"/><div class="inflex fixedpos"/><div class="b"/></div>
+ <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: -->
+ <div class="flexbox" style="justify-content: space-around"
+ ><div class="inflex"/><div class="inflex"/><div class="inflex"
+ /><div class="noFlexFn fixedpos"/><div class="inflex"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-2-ref.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-2-ref.xhtml
new file mode 100644
index 0000000000..9476c8086f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-2-ref.xhtml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for fixed-position children of a flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .fixedpos {
+ position: absolute;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ }
+ div.a {
+ width: 100%;
+ height: 100px;
+ background: lightgreen;
+ display: inline-block;
+ }
+ div.b {
+ width: 100%;
+ height: 100px;
+ background: yellow;
+ display: inline-block;
+ }
+ div.inflex {
+ width: 20px;
+ height: 100px;
+ background: gray;
+ display: inline-block;
+ }
+ div.noFlexFn {
+ width: 16px;
+ height: 16px;
+ background: teal;
+ display: inline-block;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <!-- First child fixedpos: -->
+ <div class="flexbox"
+ ><div class="a fixedpos" style="width: 30px"/><div class="b"/></div>
+ <!-- Second child fixedpos: -->
+ <div class="flexbox"
+ ><div class="a"/><div class="b fixedpos"
+ style="width: 20px; left: 0"/></div>
+ <!-- Middle child fixedpos: -->
+ <div class="flexbox"
+ ><div class="a" style="width: 80px"
+ /><div class="inflex fixedpos" style="left: 0"
+ /><div class="b" style="width: 120px"/></div>
+ <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: -->
+ <div class="flexbox"
+ ><div class="inflex" style="margin-left: 15px"
+ /><div class="inflex" style="margin-left: 30px"
+ /><div class="inflex" style="margin-left: 30px"
+ /><div class="noFlexFn fixedpos" style="left: 90px"
+ /><div class="inflex" style="margin-left: 30px"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-2.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-2.xhtml
new file mode 100644
index 0000000000..00a3c18a4f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-2.xhtml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Testcase with fixed-position children of a flex container.
+ In this testcase, we simply specify "position: fixed" without
+ actually doing any positioning, to test the "static position" of these
+ children.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .fixedpos {
+ position: fixed;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ width: 200px;
+ height: 100px;
+ display: flex;
+ }
+ div.a {
+ flex: 1 0 auto;
+ width: 30px;
+ height: 100px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 auto;
+ width: 20px;
+ height: 100px;
+ background: yellow;
+ }
+ div.inflex {
+ flex: none;
+ width: 20px;
+ height: 100px;
+ background: gray;
+ }
+ div.noFlexFn {
+ width: 16px;
+ height: 16px;
+ background: teal;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <!-- First child fixedpos: -->
+ <div class="flexbox"><div class="a fixedpos"/><div class="b"/></div>
+ <!-- Second child fixedpos: -->
+ <div class="flexbox"><div class="a"/><div class="b fixedpos"/></div>
+ <!-- Middle child fixedpos: -->
+ <div class="flexbox"
+ ><div class="a"/><div class="inflex fixedpos"/><div class="b"/></div>
+ <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: -->
+ <div class="flexbox" style="justify-content: space-around"
+ ><div class="inflex"/><div class="inflex"/><div class="inflex"
+ /><div class="noFlexFn fixedpos"/><div class="inflex"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-3-ref.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-3-ref.xhtml
new file mode 100644
index 0000000000..d0a086d60d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-3-ref.xhtml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for fixed-position flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ div.flexbox {
+ top: 30px;
+ left: 40px;
+ width: 200px;
+ height: 100px;
+ position: fixed;
+ border: 1px solid black;
+ }
+ div.a {
+ width: 80px;
+ height: 100px;
+ background: lightgreen;
+ display: inline-block;
+ }
+ div.b {
+ width: 120px;
+ height: 100px;
+ background: yellow;
+ display: inline-block;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <div class="flexbox"><div class="a"/><div class="b"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-3.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-3.xhtml
new file mode 100644
index 0000000000..a67481879d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-3.xhtml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Testcase with fixed-position flex container.
+ This positioning is with respect to the viewport.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ div.flexbox {
+ top: 30px;
+ left: 40px;
+ width: 200px;
+ height: 100px;
+ display: flex;
+ position: fixed;
+ border: 1px solid black;
+ }
+ div.a {
+ flex: 1 0 30px;
+ height: 100px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 20px;
+ height: 100px;
+ background: yellow;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <div class="flexbox"><div class="a"/><div class="b"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-4-ref.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-4-ref.xhtml
new file mode 100644
index 0000000000..8778326655
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-4-ref.xhtml
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for fixed-position flex container & children. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .fixedpos {
+ position: fixed;
+ left: 5px;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ top: 30px;
+ left: 40px;
+ width: 200px;
+ height: 100px;
+ position: fixed;
+ border: 2px dashed teal;
+ }
+ div.a {
+ width: 30px;
+ height: 100px;
+ background: lightgreen;
+ display: inline-block;
+ }
+ div.b {
+ width: 100%;
+ height: 100px;
+ background: yellow;
+ display: inline-block;
+ vertical-align: top;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <div class="flexbox"
+ ><div class="a fixedpos"/><div class="b"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-position-fixed-4.xhtml b/layout/reftests/flexbox/flexbox-position-fixed-4.xhtml
new file mode 100644
index 0000000000..05c75baeeb
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-position-fixed-4.xhtml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ Testcase with fixed-position flex container & children.
+ All positioning is with respect to the viewport.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ div.containingBlock {
+ top: 15px;
+ left: 20px;
+ height: 400px;
+ position: absolute;
+ border: 2px dashed purple;
+ }
+ .fixedpos {
+ position: fixed;
+ left: 5px;
+ border: 2px dotted black;
+ }
+ div.flexbox {
+ top: 30px;
+ left: 40px;
+ width: 200px;
+ height: 100px;
+ display: flex;
+ position: fixed;
+ border: 2px dashed teal;
+ }
+ div.a {
+ flex: 1 0 auto;
+ width: 30px;
+ height: 100px;
+ background: lightgreen;
+ }
+ div.b {
+ flex: 2 0 20px;
+ height: 100px;
+ background: yellow;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="containingBlock">
+ <div class="flexbox"><div class="a fixedpos"/><div class="b"/></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-resizeviewport-1-helper.html b/layout/reftests/flexbox/flexbox-resizeviewport-1-helper.html
new file mode 100644
index 0000000000..66df03b9de
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-resizeviewport-1-helper.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Helper-file for reftest flexbox-resizeviewport-1.xhtml
+ I'm intentionally using quirks-mode (no doctype), so that
+ a 100% height will work. -->
+<html>
+ <head>
+ <style>
+ div.flexbox {
+ display: flex;
+ height: 100%;
+ border: 2px dashed black;
+ }
+ div.a {
+ flex: 1;
+ background: pink;
+ }
+ div.b {
+ flex: 1;
+ background: teal;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ <div class="a"></div><div class="b"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-resizeviewport-1-ref.xhtml b/layout/reftests/flexbox/flexbox-resizeviewport-1-ref.xhtml
new file mode 100644
index 0000000000..59ba62e64c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-resizeviewport-1-ref.xhtml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ iframe {
+ width: 75px;
+ height: 75px;
+ }
+ </style>
+ </head>
+ <body>
+ <iframe src="flexbox-resizeviewport-1-helper.html" style="width: 50px"/>
+ <iframe src="flexbox-resizeviewport-1-helper.html" style="width: 125px"/>
+ <br/>
+ <iframe src="flexbox-resizeviewport-1-helper.html" style="height: 50px"/>
+ <iframe src="flexbox-resizeviewport-1-helper.html" style="height: 125px"/>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-resizeviewport-1.xhtml b/layout/reftests/flexbox/flexbox-resizeviewport-1.xhtml
new file mode 100644
index 0000000000..2875e8ee3b
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-resizeviewport-1.xhtml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase to be sure a flex container gets reflowed properly when its
+ iframe changes size. -->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ iframe {
+ width: 75px;
+ height: 75px;
+ }
+ </style>
+ <script>
+ function setElementPropertyTo(id, propertyName, propertyValue) {
+ var elem = document.getElementById(id);
+ elem.style[propertyName] = propertyValue;
+ }
+
+ function tweak() {
+ setElementPropertyTo("a", "width", "50px");
+ setElementPropertyTo("b", "width", "125px");
+ setElementPropertyTo("c", "height", "50px");
+ setElementPropertyTo("d", "height", "125px");
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <iframe id="a" src="flexbox-resizeviewport-1-helper.html"/>
+ <iframe id="b" src="flexbox-resizeviewport-1-helper.html"/>
+ <br/>
+ <iframe id="c" src="flexbox-resizeviewport-1-helper.html"/>
+ <iframe id="d" src="flexbox-resizeviewport-1-helper.html"/>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-resizeviewport-2-helper.html b/layout/reftests/flexbox/flexbox-resizeviewport-2-helper.html
new file mode 100644
index 0000000000..998bcbd527
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-resizeviewport-2-helper.html
@@ -0,0 +1,32 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Helper-file for reftest flexbox-resizeviewport-2.xhtml
+ I'm intentionally using quirks-mode (no doctype), so that
+ a 100% width (block-size) will work. -->
+<html>
+ <head>
+ <style>
+ html { writing-mode: vertical-rl; }
+ div.flexbox {
+ display: flex;
+ width: 100%;
+ border: 2px dashed black;
+ }
+ div.a {
+ flex: 1;
+ background: pink;
+ }
+ div.b {
+ flex: 1;
+ background: teal;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flexbox">
+ <div class="a"></div><div class="b"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-resizeviewport-2-ref.xhtml b/layout/reftests/flexbox/flexbox-resizeviewport-2-ref.xhtml
new file mode 100644
index 0000000000..9c76a32b8d
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-resizeviewport-2-ref.xhtml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style>
+ iframe {
+ width: 75px;
+ height: 75px;
+ }
+ </style>
+ </head>
+ <body>
+ <iframe src="flexbox-resizeviewport-2-helper.html" style="width: 50px"/>
+ <iframe src="flexbox-resizeviewport-2-helper.html" style="width: 125px"/>
+ <br/>
+ <iframe src="flexbox-resizeviewport-2-helper.html" style="height: 50px"/>
+ <iframe src="flexbox-resizeviewport-2-helper.html" style="height: 125px"/>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-resizeviewport-2.xhtml b/layout/reftests/flexbox/flexbox-resizeviewport-2.xhtml
new file mode 100644
index 0000000000..5a479364bb
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-resizeviewport-2.xhtml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase to be sure a flex container gets reflowed properly when its
+ iframe changes size. -->
+<!-- XXXdholbert This testcase can't actually test the scenario it's intended
+ to test right now (quirks-mode percent-BSize resolution in a vertical
+ writing mode), due to Bug 1441348.
+ -->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+ iframe {
+ width: 75px;
+ height: 75px;
+ }
+ </style>
+ <script>
+ function setElementPropertyTo(id, propertyName, propertyValue) {
+ var elem = document.getElementById(id);
+ elem.style[propertyName] = propertyValue;
+ }
+
+ function tweak() {
+ setElementPropertyTo("a", "width", "50px");
+ setElementPropertyTo("b", "width", "125px");
+ setElementPropertyTo("c", "height", "50px");
+ setElementPropertyTo("d", "height", "125px");
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </head>
+ <body>
+ <iframe id="a" src="flexbox-resizeviewport-2-helper.html"/>
+ <iframe id="b" src="flexbox-resizeviewport-2-helper.html"/>
+ <br/>
+ <iframe id="c" src="flexbox-resizeviewport-2-helper.html"/>
+ <iframe id="d" src="flexbox-resizeviewport-2-helper.html"/>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-styling-on-svg-1-ref.svg b/layout/reftests/flexbox/flexbox-styling-on-svg-1-ref.svg
new file mode 100644
index 0000000000..f2eef91e4e
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-styling-on-svg-1-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="100%" height="100%">
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+</svg>
diff --git a/layout/reftests/flexbox/flexbox-styling-on-svg-1.svg b/layout/reftests/flexbox/flexbox-styling-on-svg-1.svg
new file mode 100644
index 0000000000..c12e9dde55
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-styling-on-svg-1.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ style="display:flex"
+ width="100%" height="100%">
+
+ <title>Test that we ignore "display:flex" on a root SVG node</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=969460 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+</svg>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-1-ref.html b/layout/reftests/flexbox/flexbox-table-flex-items-1-ref.html
new file mode 100644
index 0000000000..0a44422f4b
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-1-ref.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Reference: caption size test for table flex items</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1334403">
+ <style type="text/css">
+* { vertical-align: top; }
+.flex {
+ display: inline-flex;
+ border: 3px solid grey;
+ height: 73px;
+ width: 110px;
+ align-items: start; /* no support for stretch yet: bug 799725 */
+}
+
+table {
+ border: 1px solid;
+ padding: 0;
+ margin: 0;
+ background: lightgrey;
+ flex: auto;
+ min-width: 0;
+ min-height: 0;
+ width: 32px;
+ height: 22px;
+}
+
+caption { border: 1px dashed blue; height: 16px; }
+t { display:block; width:30px; height:20px; }
+i:nth-of-type(1) { width:10px; height:20px; }
+i:nth-of-type(2) { width:20px; height:10px; }
+
+.hma10 { margin: 7px 3px 1px auto; }
+.hmaa { margin: 7px auto 1px auto; }
+.vma10 { margin: auto 7px 3px 1px; }
+.vmaa { margin: auto 7px auto 1px; }
+
+.vr { writing-mode: vertical-rl; }
+ </style>
+</head>
+<body>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hma10"><caption></caption><td><t></t></td></table></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hmaa"><caption></caption><td><t></t></td></table><i></i></div>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vma10"><caption></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vmaa"><caption></caption><td><t></t></td></table><i></i></div>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hma10"></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hmaa"></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vma10"></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vmaa"></caption><td><t></t></td></table><i></i></div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-1.html b/layout/reftests/flexbox/flexbox-table-flex-items-1.html
new file mode 100644
index 0000000000..a58a8a99b6
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-1.html
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: caption size test for table flex items</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1334403">
+ <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
+ <link rel="match" href="flexbox-table-flex-items-1-ref.html">
+ <style type="text/css">
+* { vertical-align: top; }
+.flex {
+ display: inline-flex;
+ border: 3px solid grey;
+ height: 73px;
+ width: 110px;
+ align-items: start; /* no support for stretch yet: bug 799725 */
+}
+
+table {
+ border: 1px solid;
+ padding: 0;
+ margin: 0;
+ background: lightgrey;
+ flex: auto;
+ min-width: 0;
+ min-height: 0;
+}
+
+caption { border: 1px dashed blue;}
+x { display:block; width:16px; height:16px; }
+t { display:block; width:30px; height:20px; }
+i:nth-of-type(1) { width:10px; height:20px; }
+i:nth-of-type(2) { width:20px; height:10px; }
+
+.hma10 { margin: 7px 3px 1px auto; }
+.hmaa { margin: 7px auto 1px auto; }
+.vma10 { margin: auto 7px 3px 1px; }
+.vmaa { margin: auto 7px auto 1px; }
+
+.vr { writing-mode: vertical-rl; }
+ </style>
+</head>
+<body>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hma10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hmaa"><caption><x></x></caption><td><t></t></td></table><i></i></div>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vma10"><caption><x></x></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vmaa"><caption><x></x></caption><td><t></t></td></table><i></i></div>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hma10"><x></x></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hmaa"><x></x></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vma10"><x></x></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vmaa"><x></x></caption><td><t></t></td></table><i></i></div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-2-ref.html b/layout/reftests/flexbox/flexbox-table-flex-items-2-ref.html
new file mode 100644
index 0000000000..98a93716a5
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-2-ref.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size">
+ <style>
+ .container {
+ display: flex;
+ width: 100px;
+ border: 1px solid black;
+ }
+
+ /* Two types of flex items: */
+ .table {
+ border: 2px solid teal;
+ }
+ .block {
+ border: 2px solid brown;
+ }
+
+ /* Each flex item gets one of these as its contents,
+ to have a nonzero content size: */
+ ib {
+ display: inline-block;
+ background: blue;
+ border: 1px solid gray;
+ width: 15px;
+ height: 10px;
+ }
+ </style>
+</head>
+<body>
+<!-- auto size: -->
+<div class="container">
+ <div class="table"><ib></ib></div>
+ <div class="block"><ib></ib></div>
+</div>
+
+<!-- px size: -->
+<div class="container">
+ <div class="table" style="width: 30px"><ib></ib></div>
+ <div class="block" style="width: 30px"><ib></ib></div>
+</div>
+
+<!-- % size: -->
+<div class="container">
+ <div class="table" style="width: 30%"><ib></ib></div>
+ <div class="block" style="width: 30%"><ib></ib></div>
+</div>
+
+<!-- calc() size: -->
+<div class="container">
+ <div class="table" style="width: calc(10px + 20%)"><ib></ib></div>
+ <div class="block" style="width: calc(10px + 20%)"><ib></ib></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-2.html b/layout/reftests/flexbox/flexbox-table-flex-items-2.html
new file mode 100644
index 0000000000..c11ce70802
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-2.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>
+ CSS Test: Testing that implicit "flex-basis: content" on table wrapper box
+ doesn't prevent explicit table size from influencing flex base size.
+ </title>
+ <!-- XXXdholbert NOTE: This probably eventually should move to our
+ upstreamed reftest directory. But for now, this is just asserting
+ backwards-compatible/interoperable (but not necessary spec-compliant)
+ behavior, per https://github.com/w3c/csswg-drafts/issues/2604 -->
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size">
+ <link rel="match" href="flexbox-table-flex-items-2.html">
+ <style>
+ .container {
+ display: flex;
+ width: 100px;
+ border: 1px solid black;
+ }
+
+ /* Two types of flex items: */
+ .table {
+ display: table;
+ border: 2px solid teal;
+ }
+ .block {
+ border: 2px solid brown;
+ }
+
+ /* Each flex item gets one of these as its contents,
+ to have a nonzero content size: */
+ ib {
+ display: inline-block;
+ background: blue;
+ border: 1px solid gray;
+ width: 15px;
+ height: 10px;
+ }
+ </style>
+</head>
+<body>
+<!-- auto size: -->
+<div class="container">
+ <div class="table"><ib></ib></div>
+ <div class="block"><ib></ib></div>
+</div>
+
+<!-- px size: -->
+<div class="container">
+ <div class="table" style="width: 30px"><ib></ib></div>
+ <div class="block" style="width: 30px"><ib></ib></div>
+</div>
+
+<!-- % size: -->
+<div class="container">
+ <div class="table" style="width: 30%"><ib></ib></div>
+ <div class="block" style="width: 30%"><ib></ib></div>
+</div>
+
+<!-- calc() size: -->
+<div class="container">
+ <div class="table" style="width: calc(10px + 20%)"><ib></ib></div>
+ <div class="block" style="width: calc(10px + 20%)"><ib></ib></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-3-ref.html b/layout/reftests/flexbox/flexbox-table-flex-items-3-ref.html
new file mode 100644
index 0000000000..568495f341
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-3-ref.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size">
+ <style>
+ .container {
+ display: flex;
+ flex-direction: column;
+ height: 100px;
+ float: left;
+ border: 1px solid black;
+ }
+
+ /* Two types of flex items: */
+ .table {
+ border: 2px solid teal;
+ }
+ .block {
+ border: 2px solid brown;
+ }
+
+ /* Each flex item gets one of these as its contents,
+ to have a nonzero content size: */
+ ib {
+ display: inline-block;
+ background: blue;
+ border: 1px solid gray;
+ width: 15px;
+ height: 10px;
+ }
+ </style>
+</head>
+<body>
+<!-- auto size: -->
+<div class="container">
+ <div class="table"><ib></ib></div>
+ <div class="block"><ib></ib></div>
+</div>
+
+<!-- px size: -->
+<div class="container">
+ <div class="table" style="height: 30px"><ib></ib></div>
+ <div class="block" style="height: 30px"><ib></ib></div>
+</div>
+
+<!-- % size: -->
+<div class="container">
+ <div class="table" style="height: 30%"><ib></ib></div>
+ <div class="block" style="height: 30%"><ib></ib></div>
+</div>
+
+<!-- calc() size: -->
+<div class="container">
+ <div class="table" style="height: calc(10px + 20%)"><ib></ib></div>
+ <div class="block" style="height: calc(10px + 20%)"><ib></ib></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-3.html b/layout/reftests/flexbox/flexbox-table-flex-items-3.html
new file mode 100644
index 0000000000..c68152856f
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-3.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>
+ CSS Test: Testing that implicit "flex-basis: content" on table wrapper box
+ doesn't prevent explicit table size from influencing flex base size.
+ </title>
+ <!-- XXXdholbert NOTE: This probably eventually should move to our
+ upstreamed reftest directory. But for now, this is just asserting
+ backwards-compatible/interoperable (but not necessary spec-compliant)
+ behavior, per https://github.com/w3c/csswg-drafts/issues/2604 -->
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size">
+ <link rel="match" href="flexbox-table-flex-items-3.html">
+ <style>
+ .container {
+ display: flex;
+ flex-direction: column;
+ height: 100px;
+ float: left;
+ border: 1px solid black;
+ }
+
+ /* Two types of flex items: */
+ .table {
+ display: table;
+ border: 2px solid teal;
+ }
+ .block {
+ border: 2px solid brown;
+ }
+
+ /* Each flex item gets one of these as its contents,
+ to have a nonzero content size: */
+ ib {
+ display: inline-block;
+ background: blue;
+ border: 1px solid gray;
+ width: 15px;
+ height: 10px;
+ }
+ </style>
+</head>
+<body>
+<!-- auto size: -->
+<div class="container">
+ <div class="table"><ib></ib></div>
+ <div class="block"><ib></ib></div>
+</div>
+
+<!-- px size: -->
+<div class="container">
+ <div class="table" style="height: 30px"><ib></ib></div>
+ <div class="block" style="height: 30px"><ib></ib></div>
+</div>
+
+<!-- % size: -->
+<div class="container">
+ <div class="table" style="height: 30%"><ib></ib></div>
+ <div class="block" style="height: 30%"><ib></ib></div>
+</div>
+
+<!-- calc() size: -->
+<div class="container">
+ <div class="table" style="height: calc(10px + 20%)"><ib></ib></div>
+ <div class="block" style="height: calc(10px + 20%)"><ib></ib></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-4-ref.html b/layout/reftests/flexbox/flexbox-table-flex-items-4-ref.html
new file mode 100644
index 0000000000..ac18887826
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-4-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>
+ CSS Reference Case
+ </title>
+ <style>
+ .container {
+ display: flex;
+ flex-wrap: wrap;
+ width: 300px;
+ border: 1px solid black;
+ font: 12px monospace;
+ margin-bottom: 5px;
+ }
+ .container > * {
+ flex: 1 400px; /* Bigger than flex container;
+ should linewrap and cooperatively shrink to fit. */
+ padding: 5px 10px;
+ }
+ table {
+ width: 100%;
+ background: lightgray;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div>
+ <table><td>a</td></table>
+ </div>
+ <div>
+ <table><td>b</td></table>
+ </div>
+ </div>
+ <div class="container">
+ <div>
+ <table><td>a</td></table>
+ </div>
+ <div>
+ <table><td>b</td></table>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-4.html b/layout/reftests/flexbox/flexbox-table-flex-items-4.html
new file mode 100644
index 0000000000..9e6e5f3dc0
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-4.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>
+ CSS Test: Testing that tables with "table-layout:fixed" can shrink
+ from their default flex base size to fit their multi-line flex container.
+ </title>
+ <style>
+ .container {
+ display: flex;
+ flex-wrap: wrap;
+ width: 300px;
+ border: 1px solid black;
+ font: 12px monospace;
+ margin-bottom: 5px;
+ }
+ .forceMaxContent > * {
+ width: max-content;
+ }
+ .container > * {
+ display: flex;
+ padding: 5px 10px;
+ }
+ table {
+ width: 100%;
+ table-layout: fixed;
+ background: lightgray;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div>
+ <table><td>a</td></table>
+ </div>
+ <div>
+ <table><td>b</td></table>
+ </div>
+ </div>
+ <div class="container forceMaxContent">
+ <div>
+ <table><td>a</td></table>
+ </div>
+ <div>
+ <table><td>b</td></table>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-5-ref.html b/layout/reftests/flexbox/flexbox-table-flex-items-5-ref.html
new file mode 100644
index 0000000000..664d7a33dd
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-5-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>
+ CSS Reference Case
+ </title>
+ <style>
+ .container {
+ display: flex;
+ width: 300px;
+ border: 1px solid black;
+ margin-bottom: 5px;
+ }
+ .container > * {
+ margin: 5px;
+ background: lightgray;
+ flex: 1 400px; /* Bigger than flex container; should cooperatively shrink to fit. */
+ height: 30px;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div>
+ <table><td></td></table>
+ </div>
+ <div>
+ <table><td></td></table>
+ </div>
+ </div>
+ <div class="container">
+ <div>
+ <table><td></td></table>
+ </div>
+ <div>
+ <table><td></td></table>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-5.html b/layout/reftests/flexbox/flexbox-table-flex-items-5.html
new file mode 100644
index 0000000000..2023e1c58b
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-5.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>
+ CSS Test: Testing that tables with "table-layout:fixed" can shrink
+ from their default flex base size to fit their flex container.
+ </title>
+ <style>
+ .container {
+ display: flex;
+ width: 300px;
+ border: 1px solid black;
+ margin-bottom: 5px;
+ }
+ .forceMaxContent > * {
+ width: max-content;
+ }
+ .container > * {
+ margin: 5px;
+ }
+ table {
+ width: 100%;
+ height: 30px;
+ table-layout: fixed;
+ background: lightgray;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div>
+ <table><td></td></table>
+ </div>
+ <div>
+ <table><td></td></table>
+ </div>
+ </div>
+ <div class="container forceMaxContent">
+ <div>
+ <table><td></td></table>
+ </div>
+ <div>
+ <table><td></td></table>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-1-ref.html b/layout/reftests/flexbox/flexbox-widget-flex-items-1-ref.html
new file mode 100644
index 0000000000..f08e16d265
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-1-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <style>
+ div.flexbox {
+ border: 2px dotted lightgray;
+ width: 400px;
+ height: 40px;
+ margin-bottom: 10px;
+ }
+ div.flexbox > * {
+ width: -moz-available;
+ outline: 1px dashed black;
+ margin: 0;
+ vertical-align: top;
+ display: block;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexbox"><input type="button"></div>
+ <div class="flexbox"><input type="checkbox"></div>
+ <div class="flexbox"><input type="file"></div>
+ <div class="flexbox"><input type="image"></div>
+ <div class="flexbox"><input type="password"></div>
+ <div class="flexbox"><input type="radio"></div>
+ <div class="flexbox"><input type="reset"></div>
+ <div class="flexbox"><input type="submit"></div>
+ <div class="flexbox"><input type="text"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-1.html b/layout/reftests/flexbox/flexbox-widget-flex-items-1.html
new file mode 100644
index 0000000000..317112e9fb
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-1.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This testcase checks that flex containers honor those widgets (if any) in
+ our system theme that have only a single valid size (and hence should
+ refuse to flex).
+
+ e.g. in Gecko with a GTK theme, checkboxes and radio buttons have a single
+ valid size, and any specified widths (and min/max-widths) will have no
+ effect on their rendering (regardless of whether they're in a flex
+ container).
+-->
+<html>
+<head>
+ <style>
+ div.flexbox {
+ display: flex;
+ align-items: flex-start;
+ border: 2px dotted lightgray;
+ width: 400px;
+ height: 40px;
+ margin-bottom: 10px;
+ }
+ div.flexbox > * {
+ flex: 1;
+ outline: 1px dashed black;
+ margin: 0;
+ vertical-align: top;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexbox"><input type="button"></div>
+ <div class="flexbox"><input type="checkbox"></div>
+ <div class="flexbox"><input type="file"></div>
+ <div class="flexbox"><input type="image"></div>
+ <div class="flexbox"><input type="password"></div>
+ <div class="flexbox"><input type="radio"></div>
+ <div class="flexbox"><input type="reset"></div>
+ <div class="flexbox"><input type="submit"></div>
+ <div class="flexbox"><input type="text"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-2-ref.html b/layout/reftests/flexbox/flexbox-widget-flex-items-2-ref.html
new file mode 100644
index 0000000000..ac52a17d84
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-2-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <style>
+ div.flexbox {
+ background: lightgray;
+ width: 400px;
+ height: 40px;
+ margin-bottom: 10px;
+ }
+ div.flexbox > * {
+ min-width: 350px;
+ outline: 1px dashed black;
+ margin: 0;
+ vertical-align: top;
+ display: block;
+ width: max-content;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexbox"><input type="button"></div>
+ <div class="flexbox"><input type="checkbox"></div>
+ <div class="flexbox"><input type="file"></div>
+ <div class="flexbox"><input type="image"></div>
+ <div class="flexbox"><input type="password"></div>
+ <div class="flexbox"><input type="radio"></div>
+ <div class="flexbox"><input type="reset"></div>
+ <div class="flexbox"><input type="submit"></div>
+ <div class="flexbox"><input type="text"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-2.html b/layout/reftests/flexbox/flexbox-widget-flex-items-2.html
new file mode 100644
index 0000000000..7e2ec2908c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-2.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This testcase checks that, for any widgets that have a single valid size
+ (and hence refuse to flex), we don't honor the "min-width" property
+ when running the flex algorithm, just as we don't honor it outside
+ of flexbox contexts.
+-->
+<html>
+<head>
+ <style>
+ div.flexbox {
+ display: flex;
+ align-items: flex-start;
+ background: lightgray;
+ width: 400px;
+ height: 40px;
+ margin-bottom: 10px;
+ }
+ div.flexbox > * {
+ min-width: 350px;
+ outline: 1px dashed black;
+ margin: 0;
+ vertical-align: top;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexbox"><input type="button"></div>
+ <div class="flexbox"><input type="checkbox"></div>
+ <div class="flexbox"><input type="file"></div>
+ <div class="flexbox"><input type="image"></div>
+ <div class="flexbox"><input type="password"></div>
+ <div class="flexbox"><input type="radio"></div>
+ <div class="flexbox"><input type="reset"></div>
+ <div class="flexbox"><input type="submit"></div>
+ <div class="flexbox"><input type="text"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-3-ref.html b/layout/reftests/flexbox/flexbox-widget-flex-items-3-ref.html
new file mode 100644
index 0000000000..61eb376384
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-3-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <style>
+ div.flexbox {
+ background: lightgray;
+ width: 400px;
+ height: 40px;
+ margin-bottom: 10px;
+ }
+ div.flexbox > * {
+ max-width: 3px;
+ outline: 1px dashed black;
+ margin: 0;
+ vertical-align: top;
+ display: block;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexbox"><input type="button"></div>
+ <div class="flexbox"><input type="checkbox"></div>
+ <div class="flexbox"><input type="file"></div>
+ <div class="flexbox"><input type="image"></div>
+ <div class="flexbox"><input type="password"></div>
+ <div class="flexbox"><input type="radio"></div>
+ <div class="flexbox"><input type="reset"></div>
+ <div class="flexbox"><input type="submit"></div>
+ <div class="flexbox"><input type="text"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-3.html b/layout/reftests/flexbox/flexbox-widget-flex-items-3.html
new file mode 100644
index 0000000000..dee3b4ad0c
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-3.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This testcase checks that, for any widgets that have a single valid size
+ (and hence refuse to flex), we don't honor the "max-width" property
+ when running the flex algorithm, just as we don't honor it outside
+ of flexbox contexts.
+-->
+<html>
+<head>
+ <style>
+ div.flexbox {
+ display: flex;
+ align-items: flex-start;
+ background: lightgray;
+ width: 400px;
+ height: 40px;
+ margin-bottom: 10px;
+ }
+ div.flexbox > * {
+ max-width: 3px;
+ min-width: 0; /* to override default 'min-width:auto' */
+ outline: 1px dashed black;
+ margin: 0;
+ vertical-align: top;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexbox"><input type="button"></div>
+ <div class="flexbox"><input type="checkbox"></div>
+ <div class="flexbox"><input type="file"></div>
+ <div class="flexbox"><input type="image"></div>
+ <div class="flexbox"><input type="password"></div>
+ <div class="flexbox"><input type="radio"></div>
+ <div class="flexbox"><input type="reset"></div>
+ <div class="flexbox"><input type="submit"></div>
+ <div class="flexbox"><input type="text"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-4-ref.html b/layout/reftests/flexbox/flexbox-widget-flex-items-4-ref.html
new file mode 100644
index 0000000000..b34c4f51d5
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-4-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <style>
+ div.flexbox {
+ background: lightgray;
+ float: left;
+ height: 60px;
+ margin-right: 10px;
+ }
+ div.flexbox > * {
+ outline: 1px dashed black;
+ margin: 0;
+ vertical-align: top;
+ height: 100%;
+ display: block;
+ }
+ br { clear: left; }
+ </style>
+</head>
+<body>
+ <div class="flexbox"><input type="button"></div>
+ <div class="flexbox"><input type="checkbox"></div>
+ <br>
+ <div class="flexbox"><input type="image"></div>
+ <div class="flexbox"><input type="radio"></div>
+ <br>
+ <div class="flexbox"><input type="reset"></div>
+ <div class="flexbox"><input type="submit"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-widget-flex-items-4.html b/layout/reftests/flexbox/flexbox-widget-flex-items-4.html
new file mode 100644
index 0000000000..bb7c5e9584
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-widget-flex-items-4.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This testcase checks that, for any widgets that have a single valid size
+ (and hence refuse to flex), we don't stretch them in the cross-axis,
+ despite the "align-self: stretch" property.
+
+ These widgets can be allowed to be resized on some platforms but not others.
+ We'll account for that by giving them height: 100% in the reference case,
+ so that if they're allowed to stretch, then they'll stretch in both the
+ reference case and the testcase.
+-->
+<html>
+<head>
+ <style>
+ div.flexbox {
+ display: flex;
+ background: lightgray;
+ float: left;
+ height: 60px;
+ margin-right: 10px;
+ }
+ div.flexbox > * {
+ outline: 1px dashed black;
+ margin: 0;
+ vertical-align: top;
+ height: auto;
+ align-self: stretch;
+ }
+ br { clear: left; }
+ </style>
+</head>
+<body>
+ <div class="flexbox"><input type="button"></div>
+ <div class="flexbox"><input type="checkbox"></div>
+ <br>
+ <div class="flexbox"><input type="image"></div>
+ <div class="flexbox"><input type="radio"></div>
+ <br>
+ <div class="flexbox"><input type="reset"></div>
+ <div class="flexbox"><input type="submit"></div>
+</body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html
new file mode 100644
index 0000000000..21d3342d90
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 20px;
+ column-fill: auto;
+ border: 2px solid orange;
+ }
+ .flexContainer {
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1a.html b/layout/reftests/flexbox/pagination/flexbox-empty-1a.html
new file mode 100644
index 0000000000..bbb7b8ce02
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1a.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ and with the flex container having "flex-direction: row".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 20px;
+ column-fill: auto;
+ border: 2px solid orange;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1b.html b/layout/reftests/flexbox/pagination/flexbox-empty-1b.html
new file mode 100644
index 0000000000..67cd110973
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1b.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ and with the flex container having "flex-direction: row-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 20px;
+ column-fill: auto;
+ border: 2px solid orange;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row-reverse;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1c.html b/layout/reftests/flexbox/pagination/flexbox-empty-1c.html
new file mode 100644
index 0000000000..ba560e9bd9
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1c.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ and with the flex container having "flex-direction: column".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 20px;
+ column-fill: auto;
+ border: 2px solid orange;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1d.html b/layout/reftests/flexbox/pagination/flexbox-empty-1d.html
new file mode 100644
index 0000000000..6a56362525
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1d.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ and with the flex container having "flex-direction: column-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 20px;
+ column-fill: auto;
+ border: 2px solid orange;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1e.html b/layout/reftests/flexbox/pagination/flexbox-empty-1e.html
new file mode 100644
index 0000000000..49f859e4b5
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1e.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ with the flex container overflowing its fixed-height-block parent,
+ and with the flex container having "flex-direction: row".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 20px;
+ column-fill: auto;
+ border: 2px solid orange;
+ }
+ .fixedHeightBlock {
+ height: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div></div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div></div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1f.html b/layout/reftests/flexbox/pagination/flexbox-empty-1f.html
new file mode 100644
index 0000000000..7626af8d6a
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1f.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ with the flex container overflowing its fixed-height-block parent,
+ and with the flex container having "flex-direction: row-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 20px;
+ column-fill: auto;
+ border: 2px solid orange;
+ }
+ .fixedHeightBlock {
+ height: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row-reverse;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div></div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div></div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1g.html b/layout/reftests/flexbox/pagination/flexbox-empty-1g.html
new file mode 100644
index 0000000000..7d9f44158f
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1g.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ with the flex container overflowing its fixed-height-block parent,
+ and with the flex container having "flex-direction: column".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 20px;
+ column-fill: auto;
+ border: 2px solid orange;
+ }
+ .fixedHeightBlock {
+ height: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div></div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div></div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1h.html b/layout/reftests/flexbox/pagination/flexbox-empty-1h.html
new file mode 100644
index 0000000000..37b6405a55
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1h.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ with the flex container overflowing its fixed-height-block parent,
+ and with the flex container having "flex-direction: column-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 20px;
+ column-fill: auto;
+ border: 2px solid orange;
+ }
+ .fixedHeightBlock {
+ height: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div></div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div></div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html
new file mode 100644
index 0000000000..f6911915c8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ margin/border/padding that are larger than the available height,
+ and with the flex container having "flex-direction: row".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 20px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 2px;
+ }
+ .flexContainer {
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- margin-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 10px"></div>
+ </div>
+
+ <!-- margin-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 11px"></div>
+ </div>
+
+ <!-- margin-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 10px"></div>
+ </div>
+
+ <!-- margin-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- border-top-width is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 10px"></div>
+ </div>
+
+ <!-- border-top-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 11px"></div>
+ </div>
+
+ <!-- border-bottom-width is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 10px"></div>
+ </div>
+
+ <!-- border-bottom-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 11px"></div>
+ </div>
+
+ <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- ==================================== -->
+ <!-- padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 10px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 11px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 10px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =========================================== -->
+ <!-- border+padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 5px;
+ padding-top: 5px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 6px;
+ padding-top: 6px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 5px;
+ padding-bottom: 5px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 6px;
+ padding-bottom: 6px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2a.html b/layout/reftests/flexbox/pagination/flexbox-empty-2a.html
new file mode 100644
index 0000000000..b9f98edefa
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2a.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ margin/border/padding that are larger than the available height,
+ and with the flex container having "flex-direction: row".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 20px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- margin-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 10px"></div>
+ </div>
+
+ <!-- margin-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 11px"></div>
+ </div>
+
+ <!-- margin-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 10px"></div>
+ </div>
+
+ <!-- margin-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- border-top-width is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 10px"></div>
+ </div>
+
+ <!-- border-top-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 11px"></div>
+ </div>
+
+ <!-- border-bottom-width is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 10px"></div>
+ </div>
+
+ <!-- border-bottom-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 11px"></div>
+ </div>
+
+ <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- ==================================== -->
+ <!-- padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 10px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 11px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 10px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =========================================== -->
+ <!-- border+padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 5px;
+ padding-top: 5px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 6px;
+ padding-top: 6px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 5px;
+ padding-bottom: 5px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 6px;
+ padding-bottom: 6px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2b.html b/layout/reftests/flexbox/pagination/flexbox-empty-2b.html
new file mode 100644
index 0000000000..e8c85f2a41
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2b.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ margin/border/padding that are larger than the available height,
+ and with the flex container having "flex-direction: row-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 20px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row-reverse;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- margin-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 10px"></div>
+ </div>
+
+ <!-- margin-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 11px"></div>
+ </div>
+
+ <!-- margin-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 10px"></div>
+ </div>
+
+ <!-- margin-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- border-top-width is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 10px"></div>
+ </div>
+
+ <!-- border-top-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 11px"></div>
+ </div>
+
+ <!-- border-bottom-width is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 10px"></div>
+ </div>
+
+ <!-- border-bottom-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 11px"></div>
+ </div>
+
+ <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- ==================================== -->
+ <!-- padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 10px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 11px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 10px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =========================================== -->
+ <!-- border+padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 5px;
+ padding-top: 5px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 6px;
+ padding-top: 6px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 5px;
+ padding-bottom: 5px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 6px;
+ padding-bottom: 6px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2c.html b/layout/reftests/flexbox/pagination/flexbox-empty-2c.html
new file mode 100644
index 0000000000..57c63cc68b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2c.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ margin/border/padding that are larger than the available height,
+ and with the flex container having "flex-direction: column".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 20px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- margin-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 10px"></div>
+ </div>
+
+ <!-- margin-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 11px"></div>
+ </div>
+
+ <!-- margin-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 10px"></div>
+ </div>
+
+ <!-- margin-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- border-top-width is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 10px"></div>
+ </div>
+
+ <!-- border-top-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 11px"></div>
+ </div>
+
+ <!-- border-bottom-width is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 10px"></div>
+ </div>
+
+ <!-- border-bottom-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 11px"></div>
+ </div>
+
+ <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- ==================================== -->
+ <!-- padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 10px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 11px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 10px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =========================================== -->
+ <!-- border+padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 5px;
+ padding-top: 5px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 6px;
+ padding-top: 6px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 5px;
+ padding-bottom: 5px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 6px;
+ padding-bottom: 6px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2d.html b/layout/reftests/flexbox/pagination/flexbox-empty-2d.html
new file mode 100644
index 0000000000..bff0016745
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2d.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ margin/border/padding that are larger than the available height,
+ and with the flex container having "flex-direction: column-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 20px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- margin-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 10px"></div>
+ </div>
+
+ <!-- margin-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 11px"></div>
+ </div>
+
+ <!-- margin-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 10px"></div>
+ </div>
+
+ <!-- margin-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- border-top-width is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 10px"></div>
+ </div>
+
+ <!-- border-top-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 11px"></div>
+ </div>
+
+ <!-- border-bottom-width is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 10px"></div>
+ </div>
+
+ <!-- border-bottom-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 11px"></div>
+ </div>
+
+ <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- ==================================== -->
+ <!-- padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 10px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 11px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 10px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =========================================== -->
+ <!-- border+padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 5px;
+ padding-top: 5px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 6px;
+ padding-top: 6px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 5px;
+ padding-bottom: 5px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 6px;
+ padding-bottom: 6px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1-ref.html
new file mode 100644
index 0000000000..2ee6901e7d
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1-ref.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of multi-line column flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .gap {
+ block-size: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ position: relative;
+ inset-inline-start: 5px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ position: relative;
+ inset-inline-start: 10px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1a.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1a.html
new file mode 100644
index 0000000000..349b7f92e7
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1a.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1b.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1b.html
new file mode 100644
index 0000000000..660a8e1398
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1b.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1c.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1c.html
new file mode 100644
index 0000000000..ceaf678e41
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1c.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column flex container with flexible length flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 150px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ flex-grow: 2;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ flex-grow: 1;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ flex-grow: 1;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ flex-grow: 2;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1d.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1d.html
new file mode 100644
index 0000000000..44ddf8a61b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1d.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column-reverse flex container with flexible length flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 150px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ flex-grow: 2;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ flex-grow: 1;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ flex-grow: 1;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ flex-grow: 2;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1e.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1e.html
new file mode 100644
index 0000000000..24f8e14b9b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1e.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with block-size:auto flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ }
+ header > div {
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ align-self: flex-start;
+ }
+ nav > div {
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ align-self: center;
+ }
+ article > div {
+ block-size: 25px;
+ }
+ footer {
+ background: black;
+ align-self: flex-end;
+ }
+ footer > div {
+ block-size: 50px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1f.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1f.html
new file mode 100644
index 0000000000..54c99d4078
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1f.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with block-size:auto flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ }
+ footer > div {
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ align-self: flex-start;
+ }
+ article > div {
+ block-size: 25px;
+ }
+ nav {
+ background: yellow;
+ align-self: center;
+ }
+ nav > div {
+ block-size: 25px;
+ }
+ header {
+ background: black;
+ align-self: flex-end;
+ }
+ header > div {
+ block-size: 50px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1g.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1g.html
new file mode 100644
index 0000000000..9ab52a8a39
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1g.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ .multicol {
+ block-size: 30px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1h.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1h.html
new file mode 100644
index 0000000000..83f99ea000
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1h.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ .multicol {
+ block-size: 30px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1i.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1i.html
new file mode 100644
index 0000000000..aade35b4d6
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1i.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ .multicol {
+ block-size: 80px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-1j.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-1j.html
new file mode 100644
index 0000000000..6ccc50a553
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-1j.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ .multicol {
+ block-size: 80px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-2-ref.html
new file mode 100644
index 0000000000..8881dd7174
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-2-ref.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of multi-line column flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 90px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 60px;
+ position: relative;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ inline-size: 20px;
+ }
+ header {
+ background: cyan;
+ block-size: 50px;
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 30px;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ position: absolute;
+ inset-block-start: 25px;
+ inset-inline-start: 35px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 70px;
+ }
+ .border-padding > header, .border-padding > nav, .border-padding > footer {
+ inset-block-start: 5px;
+ }
+ .border-padding > article {
+ inset-block-start: 30px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article style="inset-block-start: 30px"></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article style="inset-block-start: 35px"></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-2.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-2.html
new file mode 100644
index 0000000000..070cea0de4
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-2.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-2-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. The block-size of the flex container is made shorter than its flex items.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 90px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ /* Block-size is deliberately made so that the flex items are wrapping into
+ three lines, and each line is 30px wide. */
+ block-size: 60px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ inline-size: 20px;
+ }
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1-ref.html
new file mode 100644
index 0000000000..ee12682ef1
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of multi-line column flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .gap {
+ block-size: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ position: relative;
+ inset-inline-start: 5px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ position: relative;
+ inset-inline-start: 10px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1a.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1a.html
new file mode 100644
index 0000000000..8ac70d9774
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1a.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1b.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1b.html
new file mode 100644
index 0000000000..042f09f424
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1b.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1c.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1c.html
new file mode 100644
index 0000000000..0129a7515c
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1c.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column flex container with flexible length flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 150px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ flex-grow: 2;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ flex-grow: 1;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ flex-grow: 1;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ flex-grow: 2;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1d.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1d.html
new file mode 100644
index 0000000000..12730915c9
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1d.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column-reverse flex container with flexible length flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 150px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ flex-grow: 2;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ flex-grow: 1;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ flex-grow: 1;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ flex-grow: 2;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1e.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1e.html
new file mode 100644
index 0000000000..960a342b00
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1e.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with block-size:auto flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ }
+ header > div {
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ align-self: flex-start;
+ }
+ nav > div {
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ align-self: center;
+ }
+ article > div {
+ block-size: 25px;
+ }
+ footer {
+ background: black;
+ align-self: flex-end;
+ }
+ footer > div {
+ block-size: 50px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1f.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1f.html
new file mode 100644
index 0000000000..93770c5c92
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1f.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with block-size:auto flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ }
+ footer > div {
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ align-self: flex-start;
+ }
+ article > div {
+ block-size: 25px;
+ }
+ nav {
+ background: yellow;
+ align-self: center;
+ }
+ nav > div {
+ block-size: 25px;
+ }
+ header {
+ background: black;
+ align-self: flex-end;
+ }
+ header > div {
+ block-size: 50px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1g.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1g.html
new file mode 100644
index 0000000000..e8ccb5f4bd
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1g.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 30px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1h.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1h.html
new file mode 100644
index 0000000000..9408f49e3f
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1h.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 30px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1i.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1i.html
new file mode 100644
index 0000000000..7b75ceeca9
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1i.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1j.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1j.html
new file mode 100644
index 0000000000..ba7cd24347
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-1j.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2-ref.html
new file mode 100644
index 0000000000..277da6e417
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2-ref.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of multi-line column flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 90px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 60px;
+ position: relative;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ inline-size: 20px;
+ }
+ header {
+ background: cyan;
+ block-size: 50px;
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 30px;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ position: absolute;
+ inset-block-start: 25px;
+ inset-inline-start: 35px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 70px;
+ }
+ .border-padding > header, .border-padding > nav, .border-padding > footer {
+ inset-block-start: 5px;
+ }
+ .border-padding > article {
+ inset-block-start: 30px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article style="inset-block-start: 30px"></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article style="inset-block-start: 35px"></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2.html
new file mode 100644
index 0000000000..daca4b2e6d
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-lr-2.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-lr-2-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. The block-size of the flex container is made shorter than its flex items.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 90px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ /* Block-size is deliberately made so that the flex items are wrapping into
+ three lines, and each line is 30px wide. */
+ block-size: 60px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ inline-size: 20px;
+ }
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1-ref.html
new file mode 100644
index 0000000000..d5c0093980
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of multi-line column flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .gap {
+ block-size: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ position: relative;
+ inset-inline-start: 5px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ position: relative;
+ inset-inline-start: 10px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1a.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1a.html
new file mode 100644
index 0000000000..828dab446c
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1a.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1b.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1b.html
new file mode 100644
index 0000000000..f4bee1f443
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1b.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1c.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1c.html
new file mode 100644
index 0000000000..a4420b4edf
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1c.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column flex container with flexible length flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 150px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ flex-grow: 2;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ flex-grow: 1;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ flex-grow: 1;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ flex-grow: 2;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1d.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1d.html
new file mode 100644
index 0000000000..675788a24f
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1d.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column-reverse flex container with flexible length flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 150px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ flex-grow: 2;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ flex-grow: 1;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ flex-grow: 1;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ flex-grow: 2;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1e.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1e.html
new file mode 100644
index 0000000000..e8a63a8892
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1e.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with block-size:auto flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ }
+ header > div {
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ align-self: flex-start;
+ }
+ nav > div {
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ align-self: center;
+ }
+ article > div {
+ block-size: 25px;
+ }
+ footer {
+ background: black;
+ align-self: flex-end;
+ }
+ footer > div {
+ block-size: 50px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1f.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1f.html
new file mode 100644
index 0000000000..87c9ada1b0
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1f.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with block-size:auto flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ }
+ footer > div {
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ align-self: flex-start;
+ }
+ article > div {
+ block-size: 25px;
+ }
+ nav {
+ background: yellow;
+ align-self: center;
+ }
+ nav > div {
+ block-size: 25px;
+ }
+ header {
+ background: black;
+ align-self: flex-end;
+ }
+ header > div {
+ block-size: 50px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1g.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1g.html
new file mode 100644
index 0000000000..31bee7d96b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1g.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 30px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1h.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1h.html
new file mode 100644
index 0000000000..5af8aa0903
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1h.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 30px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1i.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1i.html
new file mode 100644
index 0000000000..05fa7143d6
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1i.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1j.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1j.html
new file mode 100644
index 0000000000..862e96e121
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-1j.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2-ref.html
new file mode 100644
index 0000000000..543e00eee5
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2-ref.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of multi-line column flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 90px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 60px;
+ position: relative;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ inline-size: 20px;
+ }
+ header {
+ background: cyan;
+ block-size: 50px;
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 30px;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ position: absolute;
+ inset-block-start: 25px;
+ inset-inline-start: 35px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 70px;
+ }
+ .border-padding > header, .border-padding > nav, .border-padding > footer {
+ inset-block-start: 5px;
+ }
+ .border-padding > article {
+ inset-block-start: 30px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article style="inset-block-start: 30px"></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article style="inset-block-start: 35px"></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2.html b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2.html
new file mode 100644
index 0000000000..cdca9383af
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-column-vertical-rl-2.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-column-vertical-rl-2-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. The block-size of the flex container is made shorter than its flex items.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 90px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ /* Block-size is deliberately made so that the flex items are wrapping into
+ three lines, and each line is 30px wide. */
+ block-size: 60px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ inline-size: 20px;
+ }
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1-ref.html
new file mode 100644
index 0000000000..852c1947fe
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1-ref.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .line {
+ inline-size: 60px;
+ block-size: 50px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ float: left;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ float: right;
+ }
+ article {
+ background: yellow;
+ block-size: 40px;
+ float: left;
+ margin-block-start: 5px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ float: right;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <div class="line"><header></header><nav></nav></div>
+ <div style="block-size: 20px"><!-- row-gap --></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1a.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1a.html
new file mode 100644
index 0000000000..893a31d8e4
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1a.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1b.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1b.html
new file mode 100644
index 0000000000..c3d953451c
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1b.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap-reverse;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-end;
+ }
+ nav {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-start;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1c.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1c.html
new file mode 100644
index 0000000000..76ccbaebfe
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1c.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ .multicol {
+ block-size: 30px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1d.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1d.html
new file mode 100644
index 0000000000..4a4d022ed8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1d.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ .multicol {
+ block-size: 30px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap-reverse;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-end;
+ }
+ nav {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-start;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1e.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1e.html
new file mode 100644
index 0000000000..a0c30f3744
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1e.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ .multicol {
+ block-size: 80px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-1f.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-1f.html
new file mode 100644
index 0000000000..82ab768672
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-1f.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ .multicol {
+ block-size: 80px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap-reverse;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-end;
+ }
+ nav {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-start;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-2-ref.html
new file mode 100644
index 0000000000..e6ab0cca4d
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-2-ref.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ .multicol {
+ block-size: 70px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 140px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .line {
+ inline-size: 60px;
+ block-size: 70px;
+ }
+ .with-gap .line {
+ block-size: 60px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ float: left;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ float: right;
+ }
+ article {
+ background: yellow;
+ block-size: 40px;
+ float: left;
+ margin-block-start: 15px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ float: right;
+ margin-block-start: 20px;
+ }
+ .with-gap article, .with-gap footer {
+ margin-block-start: 10px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <div class="line"><header></header><nav></nav></div>
+ <div style="block-size: 20px"><!-- row-gap --></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-2a.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-2a.html
new file mode 100644
index 0000000000..587171bb34
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-2a.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-2-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+ <style>
+ .multicol {
+ block-size: 70px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 140px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-2b.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-2b.html
new file mode 100644
index 0000000000..602fdd9704
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-2b.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-2-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+ <style>
+ .multicol {
+ block-size: 70px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap-reverse;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 140px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-end;
+ }
+ nav {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-start;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1-ref.html
new file mode 100644
index 0000000000..f982fa8ede
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1-ref.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .line {
+ inline-size: 60px;
+ block-size: 50px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ float: left;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ float: right;
+ }
+ article {
+ background: yellow;
+ block-size: 40px;
+ float: left;
+ margin-block-start: 5px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ float: right;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <div class="line"><header></header><nav></nav></div>
+ <div style="block-size: 20px"><!-- row-gap --></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1a.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1a.html
new file mode 100644
index 0000000000..c4d1202645
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1a.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1b.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1b.html
new file mode 100644
index 0000000000..bae2ec839a
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1b.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap-reverse;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-end;
+ }
+ nav {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-start;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1c.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1c.html
new file mode 100644
index 0000000000..6e2135b123
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1c.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 30px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1d.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1d.html
new file mode 100644
index 0000000000..daed00e37a
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1d.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 30px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap-reverse;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-end;
+ }
+ nav {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-start;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1e.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1e.html
new file mode 100644
index 0000000000..7dce6e8e39
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1e.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1f.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1f.html
new file mode 100644
index 0000000000..919e9929e9
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-1f.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap-reverse;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-end;
+ }
+ nav {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-start;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2-ref.html
new file mode 100644
index 0000000000..0a9cbe6693
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2-ref.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 70px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 140px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .line {
+ inline-size: 60px;
+ block-size: 70px;
+ }
+ .with-gap .line {
+ block-size: 60px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ float: left;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ float: right;
+ }
+ article {
+ background: yellow;
+ block-size: 40px;
+ float: left;
+ margin-block-start: 15px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ float: right;
+ margin-block-start: 20px;
+ }
+ .with-gap article, .with-gap footer {
+ margin-block-start: 10px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <div class="line"><header></header><nav></nav></div>
+ <div style="block-size: 20px"><!-- row-gap --></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2a.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2a.html
new file mode 100644
index 0000000000..0f179a7d97
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2a.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-vertical-lr-2-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 70px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 140px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2b.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2b.html
new file mode 100644
index 0000000000..70e7fed050
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-lr-2b.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-vertical-lr-2-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 70px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap-reverse;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 140px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-end;
+ }
+ nav {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-start;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1-ref.html
new file mode 100644
index 0000000000..ee7733abce
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1-ref.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .line {
+ inline-size: 60px;
+ block-size: 50px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ float: left;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ float: right;
+ }
+ article {
+ background: yellow;
+ block-size: 40px;
+ float: left;
+ margin-block-start: 5px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ float: right;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <div class="line"><header></header><nav></nav></div>
+ <div style="block-size: 20px"><!-- row-gap --></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1a.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1a.html
new file mode 100644
index 0000000000..e4f176116f
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1a.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1b.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1b.html
new file mode 100644
index 0000000000..2ef258b2ac
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1b.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap-reverse;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-end;
+ }
+ nav {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-start;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1c.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1c.html
new file mode 100644
index 0000000000..86a3464e2e
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1c.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 30px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1d.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1d.html
new file mode 100644
index 0000000000..114b236dc5
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1d.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 30px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap-reverse;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-end;
+ }
+ nav {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-start;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1e.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1e.html
new file mode 100644
index 0000000000..6f68852a65
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1e.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1f.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1f.html
new file mode 100644
index 0000000000..badaa3ce5d
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-1f.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap-reverse;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-end;
+ }
+ nav {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-start;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2-ref.html
new file mode 100644
index 0000000000..85b754b4e9
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2-ref.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 70px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 140px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .line {
+ inline-size: 60px;
+ block-size: 70px;
+ }
+ .with-gap .line {
+ block-size: 60px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ float: left;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ float: right;
+ }
+ article {
+ background: yellow;
+ block-size: 40px;
+ float: left;
+ margin-block-start: 15px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ float: right;
+ margin-block-start: 20px;
+ }
+ .with-gap article, .with-gap footer {
+ margin-block-start: 10px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <div class="line"><header></header><nav></nav></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <div class="line"><header></header><nav></nav></div>
+ <div style="block-size: 20px"><!-- row-gap --></div>
+ <div class="line"><article></article><footer></footer></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2a.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2a.html
new file mode 100644
index 0000000000..8de49ab568
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2a.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-vertical-rl-2-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 70px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 140px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2b.html b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2b.html
new file mode 100644
index 0000000000..b361f265a2
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multi-row-vertical-rl-2b.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size multi-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-multi-row-vertical-rl-2-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size multi-line row flex container, with various combinations of margin/border/padding, alignments, and gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 70px;
+ inline-size: 200px;
+ column-width: 60px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: wrap-reverse;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 140px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .with-gap {
+ row-gap: 20px;
+ column-gap: 10px;
+ }
+
+ header, nav, article, footer {
+ inline-size: 30px;
+ }
+ .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
+ inline-size: 25px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-end;
+ }
+ nav {
+ background: yellow;
+ block-size: 40px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-start;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding with-gap">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1-ref.html
new file mode 100644
index 0000000000..17c0956b48
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1-ref.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .gap {
+ block-size: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ position: relative;
+ inset-inline-start: 5px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ position: relative;
+ inset-inline-start: 10px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1a.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1a.html
new file mode 100644
index 0000000000..e753bcc8db
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1a.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1b.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1b.html
new file mode 100644
index 0000000000..cb9d69a8a8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1b.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1c.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1c.html
new file mode 100644
index 0000000000..490fa8c2ee
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1c.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column flex container with flexible length flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 150px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ flex-grow: 2;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ flex-grow: 1;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ flex-grow: 1;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ flex-grow: 2;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1d.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1d.html
new file mode 100644
index 0000000000..93ab363268
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1d.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column-reverse flex container with flexible length flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 150px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ flex-grow: 2;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ flex-grow: 1;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ flex-grow: 1;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ flex-grow: 2;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1e.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1e.html
new file mode 100644
index 0000000000..96176b4c72
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1e.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with block-size:auto flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ }
+ header > div {
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ align-self: flex-start;
+ }
+ nav > div {
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ align-self: center;
+ }
+ article > div {
+ block-size: 25px;
+ }
+ footer {
+ background: black;
+ align-self: flex-end;
+ }
+ footer > div {
+ block-size: 50px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1f.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1f.html
new file mode 100644
index 0000000000..f7082184fb
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1f.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with block-size:auto flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ }
+ footer > div {
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ align-self: flex-start;
+ }
+ article > div {
+ block-size: 25px;
+ }
+ nav {
+ background: yellow;
+ align-self: center;
+ }
+ nav > div {
+ block-size: 25px;
+ }
+ header {
+ background: black;
+ align-self: flex-end;
+ }
+ header > div {
+ block-size: 50px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1g.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1g.html
new file mode 100644
index 0000000000..5b540a8db7
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1g.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ .multicol {
+ block-size: 30px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1h.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1h.html
new file mode 100644
index 0000000000..c4999c5ecf
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1h.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ .multicol {
+ block-size: 30px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1i.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1i.html
new file mode 100644
index 0000000000..fd669b2d4f
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1i.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ .multicol {
+ block-size: 80px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-1j.html b/layout/reftests/flexbox/pagination/flexbox-single-column-1j.html
new file mode 100644
index 0000000000..ffc297cfb4
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-1j.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ .multicol {
+ block-size: 80px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-2-ref.html
new file mode 100644
index 0000000000..19628eb7fa
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-2-ref.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 85px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .gap {
+ block-size: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ position: relative;
+ inset-inline-start: 5px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ position: relative;
+ inset-inline-start: 10px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-2.html b/layout/reftests/flexbox/pagination/flexbox-single-column-2.html
new file mode 100644
index 0000000000..c637be9bc8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-2.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-2-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. The block-size of the flex container is made shorter than its flex items.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ /* Block-size is deliberately made shorter than all its flex items. */
+ block-size: 85px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-shrink: 0;
+ }
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-3-ref.html
new file mode 100644
index 0000000000..656b43db99
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-3-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ padding-block: 15px;
+ }
+ .flexContainer {
+ background: gray;
+ box-decoration-break: clone;
+ }
+ .gap {
+ block-size: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ position: relative;
+ inset-inline-start: 5px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ position: relative;
+ inset-inline-start: 10px;
+ }
+ </style>
+
+ <body>
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-3a.html b/layout/reftests/flexbox/pagination/flexbox-single-column-3a.html
new file mode 100644
index 0000000000..46ee650173
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-3a.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-3-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, row-gap, and box-decoration-break:clone.">
+
+ <style>
+ .multicol {
+ block-size: 80px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ border: 0 solid white;
+ border-block-width: 15px;
+ box-decoration-break: clone;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-3b.html b/layout/reftests/flexbox/pagination/flexbox-single-column-3b.html
new file mode 100644
index 0000000000..a8ec6511a3
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-3b.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-3-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, row-gap, and box-decoration-break:clone.">
+
+ <style>
+ .multicol {
+ block-size: 80px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column-reverse;
+ background: gray;
+ border: 0 solid white;
+ border-block-width: 15px;
+ box-decoration-break: clone;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-4-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-4-ref.html
new file mode 100644
index 0000000000..f390e7d7ba
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-4-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html class="reftest-paged">
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container in print context</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ @page { size:5in 3in; margin:0.5in; }
+
+ html, body {
+ font-size: 12pt; margin: 0;
+ }
+
+ .flexContainer {
+ display: block;
+ background: gray;
+ border: 0.25in solid lightgray;
+ }
+ article {
+ background: yellow;
+ block-size: 2in;
+ }
+ </style>
+
+ <body>
+ <div style="block-size: 0.25in; background: lightblue"></div>
+ <div class="flexContainer">
+ <div class="flexContainer">
+ <div class="flexContainer">
+ <!-- <article> is expected to have 1 inch in the first page and 1 inch
+ in the second page. -->
+ <article></article>
+ </div>
+ </div>
+ </div>
+ <div style="block-size: 0.25in; background: lightblue"></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-4.html b/layout/reftests/flexbox/pagination/flexbox-single-column-4.html
new file mode 100644
index 0000000000..54d45a73ef
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-4.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html class="reftest-paged">
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of nested block-size:auto flex containers with a tall flex item in print context, not top-of-page</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-4-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of a tall flex item in nested block-size:auto single-line column flex containers in print context.">
+
+ <style>
+ @page { size:5in 3in; margin:0.5in; }
+
+ html, body {
+ font-size: 12pt; margin: 0;
+ }
+
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ border: 0.25in solid lightgray;
+ }
+ article {
+ background: yellow;
+ block-size: 2in;
+ }
+ </style>
+
+ <body>
+ <div style="block-size: 0.25in; background: lightblue"></div>
+ <div class="flexContainer">
+ <div class="flexContainer">
+ <div class="flexContainer">
+ <!-- <article> is expected to have 1 inch in the first page and 1 inch
+ in the second page. -->
+ <article></article>
+ </div>
+ </div>
+ </div>
+ <div style="block-size: 0.25in; background: lightblue"></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-5-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-5-ref.html
new file mode 100644
index 0000000000..b38576798a
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-5-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of block-size:auto single-line column flex container in a zero block-size multicol</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ .multicol {
+ column-count: 2;
+ block-size: 0;
+ border: 1px solid black;
+ margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+ }
+
+ .flexContainer {
+ display: block;
+ padding: 1px;
+ }
+
+ .boxDecorationBreak {
+ padding: 5px;
+ box-decoration-break: clone;
+ }
+
+ </style>
+
+ <body>
+ <!-- Basic one with padding on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div>abc</div><div>def</div>
+ </div>
+ </div>
+
+ <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer boxDecorationBreak">
+ <div>abc</div><div>def</div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-5.html b/layout/reftests/flexbox/pagination/flexbox-single-column-5.html
new file mode 100644
index 0000000000..ea2bc11222
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-5.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container in a zero block-size multicol</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-5-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of flex containers can make progress in a zero block-size multicol.">
+
+ <style>
+ .multicol {
+ column-count: 2;
+ block-size: 0;
+ border: 1px solid black;
+ margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+ }
+
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ padding: 1px;
+ }
+
+ .boxDecorationBreak {
+ padding: 5px;
+ box-decoration-break: clone;
+ }
+
+ </style>
+
+ <body>
+ <!-- Basic one with padding on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div>abc</div><div>def</div>
+ </div>
+ </div>
+
+ <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer boxDecorationBreak">
+ <div>abc</div><div>def</div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-6-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-6-ref.html
new file mode 100644
index 0000000000..e929a9a0d8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-6-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of a fixed block-size single-line column flex container and a fixed block-size flex item that has overflows</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: block;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ /* Block-size is deliberately made shorter than its flex items. */
+ block-size: 40px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ article {
+ inline-size: 30px;
+ /* Block-size is deliberately made shorter than its <div> child. */
+ block-size: 70px;
+ background: cyan;
+ }
+ article > div {
+ inline-size: 20px;
+ block-size: 140px;
+ background: magenta;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <article><div></div></article>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <article><div></div></article>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <article><div></div></article>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <article><div></div></article>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-6.html b/layout/reftests/flexbox/pagination/flexbox-single-column-6.html
new file mode 100644
index 0000000000..366a7670a7
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-6.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of a fixed block-size single-line column flex container and a fixed block-size flex item that has overflows</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-6-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of a fixed block-size flex item that has overflows in a fixed block-size single-line column flex container.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ /* Block-size is deliberately made shorter than its flex items. */
+ block-size: 40px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ article {
+ inline-size: 30px;
+ /* Block-size is deliberately made shorter than its <div> child. */
+ block-size: 70px;
+ background: cyan;
+ }
+ article > div {
+ inline-size: 20px;
+ block-size: 140px;
+ background: magenta;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <article><div></div></article>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <article><div></div></article>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <article><div></div></article>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <article><div></div></article>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1-ref.html
new file mode 100644
index 0000000000..a2884afe0b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .gap {
+ block-size: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ position: relative;
+ inset-inline-start: 5px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ position: relative;
+ inset-inline-start: 10px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1a.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1a.html
new file mode 100644
index 0000000000..8e2b234518
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1a.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1b.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1b.html
new file mode 100644
index 0000000000..32d55664ed
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1b.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1c.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1c.html
new file mode 100644
index 0000000000..4b14b7a58c
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1c.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column flex container with flexible length flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 150px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ flex-grow: 2;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ flex-grow: 1;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ flex-grow: 1;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ flex-grow: 2;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1d.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1d.html
new file mode 100644
index 0000000000..82cfc64f47
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1d.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column-reverse flex container with flexible length flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 150px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ flex-grow: 2;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ flex-grow: 1;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ flex-grow: 1;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ flex-grow: 2;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1e.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1e.html
new file mode 100644
index 0000000000..fbb208b2ac
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1e.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with block-size:auto flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ }
+ header > div {
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ align-self: flex-start;
+ }
+ nav > div {
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ align-self: center;
+ }
+ article > div {
+ block-size: 25px;
+ }
+ footer {
+ background: black;
+ align-self: flex-end;
+ }
+ footer > div {
+ block-size: 50px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1f.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1f.html
new file mode 100644
index 0000000000..04dff8815b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1f.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with block-size:auto flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ }
+ footer > div {
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ align-self: flex-start;
+ }
+ article > div {
+ block-size: 25px;
+ }
+ nav {
+ background: yellow;
+ align-self: center;
+ }
+ nav > div {
+ block-size: 25px;
+ }
+ header {
+ background: black;
+ align-self: flex-end;
+ }
+ header > div {
+ block-size: 50px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1g.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1g.html
new file mode 100644
index 0000000000..fa60c2da31
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1g.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 30px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1h.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1h.html
new file mode 100644
index 0000000000..f07619eea8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1h.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 30px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1i.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1i.html
new file mode 100644
index 0000000000..510016392a
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1i.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1j.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1j.html
new file mode 100644
index 0000000000..dff871d161
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-1j.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2-ref.html
new file mode 100644
index 0000000000..a65e6d42e2
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2-ref.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 85px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .gap {
+ block-size: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ position: relative;
+ inset-inline-start: 5px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ position: relative;
+ inset-inline-start: 10px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2.html
new file mode 100644
index 0000000000..3bfa127e2f
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-2.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-lr-2-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. The block-size of the flex container is made shorter than its flex items.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ /* Block-size is deliberately made shorter than all its flex items. */
+ block-size: 85px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-shrink: 0;
+ }
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3-ref.html
new file mode 100644
index 0000000000..fe6ca715c6
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3-ref.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ padding-block: 15px;
+ }
+ .flexContainer {
+ background: gray;
+ box-decoration-break: clone;
+ }
+ .gap {
+ block-size: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ position: relative;
+ inset-inline-start: 5px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ position: relative;
+ inset-inline-start: 10px;
+ }
+ </style>
+
+ <body>
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3a.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3a.html
new file mode 100644
index 0000000000..04c459a045
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3a.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-lr-3-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, row-gap, and box-decoration-break:clone.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ border: 0 solid white;
+ border-block-width: 15px;
+ box-decoration-break: clone;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3b.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3b.html
new file mode 100644
index 0000000000..0e9a2a40ec
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-3b.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-lr-3-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, row-gap, and box-decoration-break:clone.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column-reverse;
+ background: gray;
+ border: 0 solid white;
+ border-block-width: 15px;
+ box-decoration-break: clone;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4-ref.html
new file mode 100644
index 0000000000..c6e933cb50
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html class="reftest-paged">
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container in print context</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ @page { size:5in 3in; margin:0.5in; }
+
+ html, body {
+ font-size: 12pt; margin: 0;
+ }
+
+ .flexContainer {
+ display: block;
+ background: gray;
+ border: 0.25in solid lightgray;
+ }
+ article {
+ background: yellow;
+ block-size: 2in;
+ }
+ </style>
+
+ <body>
+ <div style="block-size: 0.25in; background: lightblue"></div>
+ <div class="flexContainer">
+ <div class="flexContainer">
+ <div class="flexContainer">
+ <!-- <article> is expected to have 1 inch in the first page and 1 inch
+ in the second page. -->
+ <article></article>
+ </div>
+ </div>
+ </div>
+ <div style="block-size: 0.25in; background: lightblue"></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4.html
new file mode 100644
index 0000000000..6b9e964736
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-4.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html class="reftest-paged">
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of nested block-size:auto flex containers with a tall flex item in print context, not top-of-page</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-lr-4-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of a tall flex item in nested block-size:auto single-line column flex containers in print context.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ @page { size:5in 3in; margin:0.5in; }
+
+ html, body {
+ font-size: 12pt; margin: 0;
+ }
+
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ border: 0.25in solid lightgray;
+ }
+ article {
+ background: yellow;
+ block-size: 2in;
+ }
+ </style>
+
+ <body>
+ <div style="block-size: 0.25in; background: lightblue"></div>
+ <div class="flexContainer">
+ <div class="flexContainer">
+ <div class="flexContainer">
+ <!-- <article> is expected to have 1 inch in the first page and 1 inch
+ in the second page. -->
+ <article></article>
+ </div>
+ </div>
+ </div>
+ <div style="block-size: 0.25in; background: lightblue"></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5-ref.html
new file mode 100644
index 0000000000..93407a8a58
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of block-size:auto single-line column flex container in a zero block-size multicol</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ column-count: 2;
+ block-size: 0;
+ border: 1px solid black;
+ margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+ }
+
+ .flexContainer {
+ display: block;
+ padding: 1px;
+ }
+
+ .boxDecorationBreak {
+ padding: 5px;
+ box-decoration-break: clone;
+ }
+
+ </style>
+
+ <body>
+ <!-- Basic one with padding on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div>abc</div><div>def</div>
+ </div>
+ </div>
+
+ <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer boxDecorationBreak">
+ <div>abc</div><div>def</div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5.html
new file mode 100644
index 0000000000..abece966b0
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container in a zero block-size multicol</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-lr-5-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of flex containers can make progress in a zero block-size multicol.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ column-count: 2;
+ block-size: 0;
+ border: 1px solid black;
+ margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+ }
+
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ padding: 1px;
+ }
+
+ .boxDecorationBreak {
+ padding: 5px;
+ box-decoration-break: clone;
+ }
+
+ </style>
+
+ <body>
+ <!-- Basic one with padding on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div>abc</div><div>def</div>
+ </div>
+ </div>
+
+ <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer boxDecorationBreak">
+ <div>abc</div><div>def</div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6-ref.html
new file mode 100644
index 0000000000..7ac7d3b6b0
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6-ref.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of a fixed block-size single-line column flex container and a fixed block-size flex item that has overflows</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: block;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ /* Block-size is deliberately made shorter than its flex items. */
+ block-size: 40px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ article {
+ inline-size: 30px;
+ /* Block-size is deliberately made shorter than its <div> child. */
+ block-size: 70px;
+ background: cyan;
+ }
+ article > div {
+ inline-size: 20px;
+ block-size: 140px;
+ background: magenta;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <article><div></div></article>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <article><div></div></article>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <article><div></div></article>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <article><div></div></article>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6.html
new file mode 100644
index 0000000000..4467324393
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-6.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of a fixed block-size single-line column flex container and a fixed block-size flex item that has overflows</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-lr-6-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of a fixed block-size flex item that has overflows in a fixed block-size single-line column flex container.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ /* Block-size is deliberately made shorter than its flex items. */
+ block-size: 40px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ article {
+ inline-size: 30px;
+ /* Block-size is deliberately made shorter than its <div> child. */
+ block-size: 70px;
+ background: cyan;
+ }
+ article > div {
+ inline-size: 20px;
+ block-size: 140px;
+ background: magenta;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <article><div></div></article>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <article><div></div></article>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <article><div></div></article>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <article><div></div></article>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1-ref.html
new file mode 100644
index 0000000000..32b3f252a7
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .gap {
+ block-size: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ position: relative;
+ inset-inline-start: 5px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ position: relative;
+ inset-inline-start: 10px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1a.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1a.html
new file mode 100644
index 0000000000..e2f0d449d5
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1a.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1b.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1b.html
new file mode 100644
index 0000000000..23f2f64e55
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1b.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1c.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1c.html
new file mode 100644
index 0000000000..02f81d5ff8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1c.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column flex container with flexible length flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 150px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ flex-grow: 2;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ flex-grow: 1;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ flex-grow: 1;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ flex-grow: 2;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1d.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1d.html
new file mode 100644
index 0000000000..19f5ba3355
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1d.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column-reverse flex container with flexible length flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of flexible length flex items in a fixed block-size single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 150px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ flex-grow: 2;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ flex-grow: 1;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ flex-grow: 1;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ flex-grow: 2;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="block-size: 165px; row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1e.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1e.html
new file mode 100644
index 0000000000..dc2f8b1f81
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1e.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with block-size:auto flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ }
+ header > div {
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ align-self: flex-start;
+ }
+ nav > div {
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ align-self: center;
+ }
+ article > div {
+ block-size: 25px;
+ }
+ footer {
+ background: black;
+ align-self: flex-end;
+ }
+ footer > div {
+ block-size: 50px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1f.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1f.html
new file mode 100644
index 0000000000..4801203c5e
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1f.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with block-size:auto flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ }
+ footer > div {
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ align-self: flex-start;
+ }
+ article > div {
+ block-size: 25px;
+ }
+ nav {
+ background: yellow;
+ align-self: center;
+ }
+ nav > div {
+ block-size: 25px;
+ }
+ header {
+ background: black;
+ align-self: flex-end;
+ }
+ header > div {
+ block-size: 50px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1g.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1g.html
new file mode 100644
index 0000000000..94d5f4442b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1g.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 30px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1h.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1h.html
new file mode 100644
index 0000000000..56b7b0a434
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1h.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 30px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1i.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1i.html
new file mode 100644
index 0000000000..3b2e82693b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1i.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1j.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1j.html
new file mode 100644
index 0000000000..d551e539d8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-1j.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, and row-gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2-ref.html
new file mode 100644
index 0000000000..4131706f62
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2-ref.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 85px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .gap {
+ block-size: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ position: relative;
+ inset-inline-start: 5px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ position: relative;
+ inset-inline-start: 10px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2.html
new file mode 100644
index 0000000000..1306a1f7fc
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-2.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-rl-2-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a fixed block-size single-line column flex container, with various combinations of margin/border/padding, alignments, and row-gap. The block-size of the flex container is made shorter than its flex items.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ /* Block-size is deliberately made shorter than all its flex items. */
+ block-size: 85px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-shrink: 0;
+ }
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3-ref.html
new file mode 100644
index 0000000000..610f8b2359
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3-ref.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ padding-block: 15px;
+ }
+ .flexContainer {
+ background: gray;
+ box-decoration-break: clone;
+ }
+ .gap {
+ block-size: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ position: relative;
+ inset-inline-start: 5px;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ position: relative;
+ inset-inline-start: 10px;
+ }
+ </style>
+
+ <body>
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3a.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3a.html
new file mode 100644
index 0000000000..5055c7d3c9
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3a.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line column flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-rl-3-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column flex container, with various combinations of margin/border/padding, alignments, row-gap, and box-decoration-break:clone.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ border: 0 solid white;
+ border-block-width: 15px;
+ box-decoration-break: clone;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header {
+ background: cyan;
+ block-size: 50px;
+ }
+ nav, article, footer {
+ inline-size: 30px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3b.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3b.html
new file mode 100644
index 0000000000..ff768b0d0e
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-3b.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line column-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-rl-3-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line column-reverse flex container, with various combinations of margin/border/padding, alignments, row-gap, and box-decoration-break:clone.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column-reverse;
+ background: gray;
+ border: 0 solid white;
+ border-block-width: 15px;
+ box-decoration-break: clone;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer {
+ background: cyan;
+ block-size: 50px;
+ }
+ article, nav, header {
+ inline-size: 30px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 25px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 50px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with row-gap. -->
+ <div class="multicol">
+ <div class="flexContainer" style="row-gap: 5px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4-ref.html
new file mode 100644
index 0000000000..7f2b80d28d
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html class="reftest-paged">
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line column flex container in print context</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ @page { size:5in 3in; margin:0.5in; }
+
+ html, body {
+ font-size: 12pt; margin: 0;
+ }
+
+ .flexContainer {
+ display: block;
+ background: gray;
+ border: 0.25in solid lightgray;
+ }
+ article {
+ background: yellow;
+ block-size: 2in;
+ }
+ </style>
+
+ <body>
+ <div style="block-size: 0.25in; background: lightblue"></div>
+ <div class="flexContainer">
+ <div class="flexContainer">
+ <div class="flexContainer">
+ <!-- <article> is expected to have 1 inch in the first page and 1 inch
+ in the second page. -->
+ <article></article>
+ </div>
+ </div>
+ </div>
+ <div style="block-size: 0.25in; background: lightblue"></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4.html
new file mode 100644
index 0000000000..9fbdb6e0cd
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-4.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html class="reftest-paged">
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of nested block-size:auto flex containers with a tall flex item in print context, not top-of-page</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-rl-4-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of a tall flex item in nested block-size:auto single-line column flex containers in print context.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ @page { size:5in 3in; margin:0.5in; }
+
+ html, body {
+ font-size: 12pt; margin: 0;
+ }
+
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ border: 0.25in solid lightgray;
+ }
+ article {
+ background: yellow;
+ block-size: 2in;
+ }
+ </style>
+
+ <body>
+ <div style="block-size: 0.25in; background: lightblue"></div>
+ <div class="flexContainer">
+ <div class="flexContainer">
+ <div class="flexContainer">
+ <!-- <article> is expected to have 1 inch in the first page and 1 inch
+ in the second page. -->
+ <article></article>
+ </div>
+ </div>
+ </div>
+ <div style="block-size: 0.25in; background: lightblue"></div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5-ref.html
new file mode 100644
index 0000000000..ab12ac5cf8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of block-size:auto single-line column flex container in a zero block-size multicol</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ column-count: 2;
+ block-size: 0;
+ border: 1px solid black;
+ margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+ }
+
+ .flexContainer {
+ display: block;
+ padding: 1px;
+ }
+
+ .boxDecorationBreak {
+ padding: 5px;
+ box-decoration-break: clone;
+ }
+
+ </style>
+
+ <body>
+ <!-- Basic one with padding on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div>abc</div><div>def</div>
+ </div>
+ </div>
+
+ <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer boxDecorationBreak">
+ <div>abc</div><div>def</div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5.html
new file mode 100644
index 0000000000..5ec4c440de
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-5.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container in a zero block-size multicol</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-rl-5-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of flex containers can make progress in a zero block-size multicol.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ column-count: 2;
+ block-size: 0;
+ border: 1px solid black;
+ margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+ }
+
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ padding: 1px;
+ }
+
+ .boxDecorationBreak {
+ padding: 5px;
+ box-decoration-break: clone;
+ }
+
+ </style>
+
+ <body>
+ <!-- Basic one with padding on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div>abc</div><div>def</div>
+ </div>
+ </div>
+
+ <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer boxDecorationBreak">
+ <div>abc</div><div>def</div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6-ref.html
new file mode 100644
index 0000000000..163d3393b2
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6-ref.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of a fixed block-size single-line column flex container and a fixed block-size flex item that has overflows</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: block;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ /* Block-size is deliberately made shorter than its flex items. */
+ block-size: 40px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ article {
+ inline-size: 30px;
+ /* Block-size is deliberately made shorter than its <div> child. */
+ block-size: 70px;
+ background: cyan;
+ }
+ article > div {
+ inline-size: 20px;
+ block-size: 140px;
+ background: magenta;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <article><div></div></article>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <article><div></div></article>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <article><div></div></article>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <article><div></div></article>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6.html b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6.html
new file mode 100644
index 0000000000..8a3706050b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-column-vertical-rl-6.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of a fixed block-size single-line column flex container and a fixed block-size flex item that has overflows</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-column-vertical-rl-6-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of a fixed block-size flex item that has overflows in a fixed block-size single-line column flex container.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 190px;
+ column-width: 40px;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: column;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ /* Block-size is deliberately made shorter than its flex items. */
+ block-size: 40px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ article {
+ inline-size: 30px;
+ /* Block-size is deliberately made shorter than its <div> child. */
+ block-size: 70px;
+ background: cyan;
+ }
+ article > div {
+ inline-size: 20px;
+ block-size: 140px;
+ background: magenta;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <article><div></div></article>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <article><div></div></article>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <article><div></div></article>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <article><div></div></article>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1-ref.html
new file mode 100644
index 0000000000..6ec3a56de4
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1-ref.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 100px;
+ position: relative;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .gap {
+ inline-size: 4px;
+ block-size: 100%;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ inline-size: 25px;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ position: absolute;
+ inset-block-start: 0px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ position: absolute;
+ inset-block-start: 0px;
+ inset-inline-start: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ position: absolute;
+ inset-block-start: 25px;
+ inset-inline-start: 50px;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ position: absolute;
+ inset-block-start: 25px;
+ inset-inline-start: 75px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <!-- Adjust top to simulate padding. -->
+ <header style="inset-block-start: 5px"></header><nav style="inset-block-start: 5px"></nav>
+ <article style="inset-block-start: 30px"></article><footer style="inset-block-start: 30px"></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header style="inline-size: 22px; inset-block-start: 5px"></header>
+ <nav style="inline-size: 22px; inset-block-start: 5px; inset-inline-start: 26px"></nav>
+ <article style="inline-size: 22px; inset-block-start: 30px; inset-inline-start: 52px;"></article>
+ <footer style="inline-size: 22px; inset-block-start: 30px; inset-inline-start: 78px;"></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1a.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1a.html
new file mode 100644
index 0000000000..7b46bb1a87
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1a.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1b.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1b.html
new file mode 100644
index 0000000000..54e77b913b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1b.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer, article, nav, header {
+ flex-grow: 1;
+ }
+ footer {
+ background: cyan;
+ block-size: 100px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1c.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1c.html
new file mode 100644
index 0000000000..d1f1c5f2f7
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1c.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with block-size:auto flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ header {
+ background: cyan;
+ }
+ header > div {
+ block-size: 100px;
+ }
+ nav {
+ background: magenta;
+ align-self: flex-start;
+ }
+ nav > div {
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ align-self: center;
+ }
+ article > div {
+ block-size: 50px;
+ }
+ footer {
+ background: black;
+ align-self: flex-end;
+ }
+ footer > div {
+ block-size: 75px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1d.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1d.html
new file mode 100644
index 0000000000..6da222694c
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1d.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with block-size:auto flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ footer {
+ background: cyan;
+ }
+ footer > div {
+ block-size: 100px;
+ }
+ article {
+ background: magenta;
+ align-self: flex-start;
+ }
+ article > div {
+ block-size: 25px;
+ }
+ nav {
+ background: yellow;
+ align-self: center;
+ }
+ nav > div {
+ block-size: 50px;
+ }
+ header {
+ background: black;
+ align-self: flex-end;
+ }
+ header > div {
+ block-size: 75px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1e.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1e.html
new file mode 100644
index 0000000000..4e31713f60
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1e.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ .multicol {
+ block-size: 30px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1f.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1f.html
new file mode 100644
index 0000000000..817139d2e8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1f.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ .multicol {
+ block-size: 30px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer, article, nav, header {
+ flex-grow: 1;
+ }
+ footer {
+ background: cyan;
+ block-size: 100px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1g.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1g.html
new file mode 100644
index 0000000000..428efa2948
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1g.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ .multicol {
+ block-size: 80px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-1h.html b/layout/reftests/flexbox/pagination/flexbox-single-row-1h.html
new file mode 100644
index 0000000000..f19aa98d79
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-1h.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ .multicol {
+ block-size: 80px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer, article, nav, header {
+ flex-grow: 1;
+ }
+ footer {
+ background: cyan;
+ block-size: 100px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-2-ref.html
new file mode 100644
index 0000000000..a18b1de965
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-2-ref.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 80px;
+ position: relative;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .gap {
+ inline-size: 4px;
+ block-size: 100%;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ inline-size: 25px;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ position: absolute;
+ inset-block-start: 0px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ position: absolute;
+ inset-block-start: 0px;
+ inset-inline-start: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ position: absolute;
+ inset-block-start: 15px;
+ inset-inline-start: 50px;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ position: absolute;
+ inset-block-start: 5px;
+ inset-inline-start: 75px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <!-- Adjust top to simulate padding. -->
+ <header style="inset-block-start: 5px"></header><nav style="inset-block-start: 5px"></nav>
+ <article style="inset-block-start: 20px"></article><footer style="inset-block-start: 10px"></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header style="inline-size: 22px; inset-block-start: 5px"></header>
+ <nav style="inline-size: 22px; inset-block-start: 5px; inset-inline-start: 26px"></nav>
+ <article style="inline-size: 22px; inset-block-start: 20px; inset-inline-start: 52px;"></article>
+ <footer style="inline-size: 22px; inset-block-start: 10px; inset-inline-start: 78px;"></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-2.html b/layout/reftests/flexbox/pagination/flexbox-single-row-2.html
new file mode 100644
index 0000000000..b114f96af2
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-2.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-2-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. The block-size of the flex container is made shorter than <header>.">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ /* Block-size is deliberately made shorter than <header>. */
+ block-size: 80px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-3-ref.html
new file mode 100644
index 0000000000..608b8670e3
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-3-ref.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ padding-block: 15px;
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid white;
+ block-size: 100px;
+ position: relative;
+ }
+ .gap {
+ inline-size: 4px;
+ block-size: 100%;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ inline-size: 25px;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ position: absolute;
+ inset-block-start: 0px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ position: absolute;
+ inset-block-start: 0px;
+ inset-inline-start: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ position: absolute;
+ inset-block-start: 25px;
+ inset-inline-start: 50px;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ position: absolute;
+ inset-block-start: 25px;
+ inset-inline-start: 75px;
+ }
+ </style>
+
+ <body>
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header style="inline-size: 22px"></header>
+ <nav style="inline-size: 22px; inset-inline-start: 26px"></nav>
+ <article style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 52px;"></article>
+ <footer style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 78px;"></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-3a.html b/layout/reftests/flexbox/pagination/flexbox-single-row-3a.html
new file mode 100644
index 0000000000..0fced5023a
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-3a.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-3-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, column-gap, and box-decoration-break:clone.">
+
+ <style>
+ .multicol {
+ block-size: 80px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ background: gray;
+ border: 0 solid white;
+ border-block-width: 15px;
+ box-decoration-break: clone;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-3b.html b/layout/reftests/flexbox/pagination/flexbox-single-row-3b.html
new file mode 100644
index 0000000000..85bb663fa6
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-3b.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-3-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, column-gap, and box-decoration-break:clone.">
+
+ <style>
+ .multicol {
+ block-size: 80px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row-reverse;
+ background: gray;
+ border: 0 solid white;
+ border-block-width: 15px;
+ box-decoration-break: clone;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ footer {
+ background: cyan;
+ block-size: 100px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-4-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-4-ref.html
new file mode 100644
index 0000000000..ebc6d6aab8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-4-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of block-size:auto single-line row flex container in a zero block-size multicol</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ .multicol {
+ column-count: 2;
+ block-size: 0;
+ border: 1px solid black;
+ margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+ }
+
+ .flexContainer {
+ display: block;
+ padding: 1px;
+ }
+
+ .boxDecorationBreak {
+ padding: 5px;
+ box-decoration-break: clone;
+ }
+
+ </style>
+
+ <body>
+ <!-- Basic one with padding on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div>abcdef</div>
+ </div>
+ </div>
+
+ <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer boxDecorationBreak">
+ <div>abcdef</div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-4.html b/layout/reftests/flexbox/pagination/flexbox-single-row-4.html
new file mode 100644
index 0000000000..9377d31bd2
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-4.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container in a zero block-size multicol</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-4-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of flex containers can make progress in a zero block-size multicol.">
+
+ <style>
+ .multicol {
+ column-count: 2;
+ block-size: 0;
+ border: 1px solid black;
+ margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+ }
+
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ padding: 1px;
+ }
+
+ .boxDecorationBreak {
+ padding: 5px;
+ box-decoration-break: clone;
+ }
+
+ </style>
+
+ <body>
+ <!-- Basic one with padding on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div>abc</div><div>def</div>
+ </div>
+ </div>
+
+ <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer boxDecorationBreak">
+ <div>abc</div><div>def</div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1-ref.html
new file mode 100644
index 0000000000..1245878626
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1-ref.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 100px;
+ position: relative;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .gap {
+ inline-size: 4px;
+ block-size: 100%;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ inline-size: 25px;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ position: absolute;
+ inset-block-start: 0px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ position: absolute;
+ inset-block-start: 0px;
+ inset-inline-start: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ position: absolute;
+ inset-block-start: 25px;
+ inset-inline-start: 50px;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ position: absolute;
+ inset-block-start: 25px;
+ inset-inline-start: 75px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <!-- Adjust top to simulate padding. -->
+ <header style="inset-block-start: 5px"></header><nav style="inset-block-start: 5px"></nav>
+ <article style="inset-block-start: 30px"></article><footer style="inset-block-start: 30px"></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header style="inline-size: 22px; inset-block-start: 5px"></header>
+ <nav style="inline-size: 22px; inset-block-start: 5px; inset-inline-start: 26px"></nav>
+ <article style="inline-size: 22px; inset-block-start: 30px; inset-inline-start: 52px;"></article>
+ <footer style="inline-size: 22px; inset-block-start: 30px; inset-inline-start: 78px;"></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1a.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1a.html
new file mode 100644
index 0000000000..d217e40a79
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1a.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1b.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1b.html
new file mode 100644
index 0000000000..36606eb9c2
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1b.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer, article, nav, header {
+ flex-grow: 1;
+ }
+ footer {
+ background: cyan;
+ block-size: 100px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1c.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1c.html
new file mode 100644
index 0000000000..2d15eec1a3
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1c.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with block-size:auto flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ header {
+ background: cyan;
+ }
+ header > div {
+ block-size: 100px;
+ }
+ nav {
+ background: magenta;
+ align-self: flex-start;
+ }
+ nav > div {
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ align-self: center;
+ }
+ article > div {
+ block-size: 50px;
+ }
+ footer {
+ background: black;
+ align-self: flex-end;
+ }
+ footer > div {
+ block-size: 75px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1d.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1d.html
new file mode 100644
index 0000000000..342adad6f5
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1d.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with block-size:auto flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ footer {
+ background: cyan;
+ }
+ footer > div {
+ block-size: 100px;
+ }
+ article {
+ background: magenta;
+ align-self: flex-start;
+ }
+ article > div {
+ block-size: 25px;
+ }
+ nav {
+ background: yellow;
+ align-self: center;
+ }
+ nav > div {
+ block-size: 50px;
+ }
+ header {
+ background: black;
+ align-self: flex-end;
+ }
+ header > div {
+ block-size: 75px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1e.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1e.html
new file mode 100644
index 0000000000..3d0264a80c
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1e.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 30px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1f.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1f.html
new file mode 100644
index 0000000000..643264e68e
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1f.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 30px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer, article, nav, header {
+ flex-grow: 1;
+ }
+ footer {
+ background: cyan;
+ block-size: 100px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1g.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1g.html
new file mode 100644
index 0000000000..a29456fbe0
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1g.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1h.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1h.html
new file mode 100644
index 0000000000..7773a72a77
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-1h.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-lr-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer, article, nav, header {
+ flex-grow: 1;
+ }
+ footer {
+ background: cyan;
+ block-size: 100px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2-ref.html
new file mode 100644
index 0000000000..e7f573a0c8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2-ref.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 80px;
+ position: relative;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .gap {
+ inline-size: 4px;
+ block-size: 100%;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ inline-size: 25px;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ position: absolute;
+ inset-block-start: 0px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ position: absolute;
+ inset-block-start: 0px;
+ inset-inline-start: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ position: absolute;
+ inset-block-start: 15px;
+ inset-inline-start: 50px;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ position: absolute;
+ inset-block-start: 5px;
+ inset-inline-start: 75px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <!-- Adjust top to simulate padding. -->
+ <header style="inset-block-start: 5px"></header><nav style="inset-block-start: 5px"></nav>
+ <article style="inset-block-start: 20px"></article><footer style="inset-block-start: 10px"></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header style="inline-size: 22px; inset-block-start: 5px"></header>
+ <nav style="inline-size: 22px; inset-block-start: 5px; inset-inline-start: 26px"></nav>
+ <article style="inline-size: 22px; inset-block-start: 20px; inset-inline-start: 52px;"></article>
+ <footer style="inline-size: 22px; inset-block-start: 10px; inset-inline-start: 78px;"></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2.html
new file mode 100644
index 0000000000..3630cc9115
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-2.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-lr-2-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. The block-size of the flex container is made shorter than <header>.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ /* Block-size is deliberately made shorter than <header>. */
+ block-size: 80px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3-ref.html
new file mode 100644
index 0000000000..93e9e832a8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3-ref.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ padding-block: 15px;
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid white;
+ block-size: 100px;
+ position: relative;
+ }
+ .gap {
+ inline-size: 4px;
+ block-size: 100%;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ inline-size: 25px;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ position: absolute;
+ inset-block-start: 0px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ position: absolute;
+ inset-block-start: 0px;
+ inset-inline-start: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ position: absolute;
+ inset-block-start: 25px;
+ inset-inline-start: 50px;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ position: absolute;
+ inset-block-start: 25px;
+ inset-inline-start: 75px;
+ }
+ </style>
+
+ <body>
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header style="inline-size: 22px"></header>
+ <nav style="inline-size: 22px; inset-inline-start: 26px"></nav>
+ <article style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 52px;"></article>
+ <footer style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 78px;"></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3a.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3a.html
new file mode 100644
index 0000000000..5fc9c58f7e
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3a.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-lr-3-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, column-gap, and box-decoration-break:clone.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ background: gray;
+ border: 0 solid white;
+ border-block-width: 15px;
+ box-decoration-break: clone;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3b.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3b.html
new file mode 100644
index 0000000000..e4f7adca3e
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-3b.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-lr-3-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, column-gap, and box-decoration-break:clone.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row-reverse;
+ background: gray;
+ border: 0 solid white;
+ border-block-width: 15px;
+ box-decoration-break: clone;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ footer {
+ background: cyan;
+ block-size: 100px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4-ref.html
new file mode 100644
index 0000000000..8da3eb8c4e
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of block-size:auto single-line row flex container in a zero block-size multicol</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ column-count: 2;
+ block-size: 0;
+ border: 1px solid black;
+ margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+ }
+
+ .flexContainer {
+ display: block;
+ padding: 1px;
+ }
+
+ .boxDecorationBreak {
+ padding: 5px;
+ box-decoration-break: clone;
+ }
+
+ </style>
+
+ <body>
+ <!-- Basic one with padding on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div>abcdef</div>
+ </div>
+ </div>
+
+ <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer boxDecorationBreak">
+ <div>abcdef</div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4.html
new file mode 100644
index 0000000000..bddacb191c
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-lr-4.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container in a zero block-size multicol</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-lr-4-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of flex containers can make progress in a zero block-size multicol.">
+
+ <style>
+ html {
+ writing-mode: vertical-lr;
+ }
+ .multicol {
+ column-count: 2;
+ block-size: 0;
+ border: 1px solid black;
+ margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+ }
+
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ padding: 1px;
+ }
+
+ .boxDecorationBreak {
+ padding: 5px;
+ box-decoration-break: clone;
+ }
+
+ </style>
+
+ <body>
+ <!-- Basic one with padding on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div>abc</div><div>def</div>
+ </div>
+ </div>
+
+ <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer boxDecorationBreak">
+ <div>abc</div><div>def</div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1-ref.html
new file mode 100644
index 0000000000..7a0e90dcde
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1-ref.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 100px;
+ position: relative;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .gap {
+ inline-size: 4px;
+ block-size: 100%;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ inline-size: 25px;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ position: absolute;
+ inset-block-start: 0px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ position: absolute;
+ inset-block-start: 0px;
+ inset-inline-start: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ position: absolute;
+ inset-block-start: 25px;
+ inset-inline-start: 50px;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ position: absolute;
+ inset-block-start: 25px;
+ inset-inline-start: 75px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <!-- Adjust top to simulate padding. -->
+ <header style="inset-block-start: 5px"></header><nav style="inset-block-start: 5px"></nav>
+ <article style="inset-block-start: 30px"></article><footer style="inset-block-start: 30px"></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header style="inline-size: 22px; inset-block-start: 5px"></header>
+ <nav style="inline-size: 22px; inset-block-start: 5px; inset-inline-start: 26px"></nav>
+ <article style="inline-size: 22px; inset-block-start: 30px; inset-inline-start: 52px;"></article>
+ <footer style="inline-size: 22px; inset-block-start: 30px; inset-inline-start: 78px;"></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1a.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1a.html
new file mode 100644
index 0000000000..925f83b062
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1a.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1b.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1b.html
new file mode 100644
index 0000000000..e8ef47b929
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1b.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer, article, nav, header {
+ flex-grow: 1;
+ }
+ footer {
+ background: cyan;
+ block-size: 100px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1c.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1c.html
new file mode 100644
index 0000000000..d8b92674d8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1c.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with block-size:auto flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ header {
+ background: cyan;
+ }
+ header > div {
+ block-size: 100px;
+ }
+ nav {
+ background: magenta;
+ align-self: flex-start;
+ }
+ nav > div {
+ block-size: 25px;
+ }
+ article {
+ background: yellow;
+ align-self: center;
+ }
+ article > div {
+ block-size: 50px;
+ }
+ footer {
+ background: black;
+ align-self: flex-end;
+ }
+ footer > div {
+ block-size: 75px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1d.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1d.html
new file mode 100644
index 0000000000..b73bf25ea8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1d.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with block-size:auto flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of block-size:auto flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ footer {
+ background: cyan;
+ }
+ footer > div {
+ block-size: 100px;
+ }
+ article {
+ background: magenta;
+ align-self: flex-start;
+ }
+ article > div {
+ block-size: 25px;
+ }
+ nav {
+ background: yellow;
+ align-self: center;
+ }
+ nav > div {
+ block-size: 50px;
+ }
+ header {
+ background: black;
+ align-self: flex-end;
+ }
+ header > div {
+ block-size: 75px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header><div></div></header><nav><div></div></nav>
+ <article><div></div></article><footer><div></div></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1e.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1e.html
new file mode 100644
index 0000000000..31417fe384
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1e.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 30px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1f.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1f.html
new file mode 100644
index 0000000000..4102f94e09
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1f.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to enlarge multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 30px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer, article, nav, header {
+ flex-grow: 1;
+ }
+ footer {
+ background: cyan;
+ block-size: 100px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1g.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1g.html
new file mode 100644
index 0000000000..149a2b0c14
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1g.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1h.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1h.html
new file mode 100644
index 0000000000..dd254dc1a8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-1h.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-rl-1-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, and column-gap. Also use a script to shrink multicol block-size.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row-reverse;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ footer, article, nav, header {
+ flex-grow: 1;
+ }
+ footer {
+ background: cyan;
+ block-size: 100px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+
+ body.multicol-children-block-size > .multicol {
+ block-size: 50px;
+ }
+ </style>
+
+ <script>
+ function runTest() {
+ document.body.offsetHeight;
+
+ /* Shrink the multicol's block-size to exercise pulling and pushing flex items
+ of an already fragmented flex container. */
+ document.body.classList.add("multicol-children-block-size");
+ }
+ </script>
+
+ <body onload="runTest()">
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2-ref.html
new file mode 100644
index 0000000000..62934a94d0
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2-ref.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ block-size: 80px;
+ position: relative;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+ .gap {
+ inline-size: 4px;
+ block-size: 100%;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ inline-size: 25px;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ position: absolute;
+ inset-block-start: 0px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ position: absolute;
+ inset-block-start: 0px;
+ inset-inline-start: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ position: absolute;
+ inset-block-start: 15px;
+ inset-inline-start: 50px;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ position: absolute;
+ inset-block-start: 5px;
+ inset-inline-start: 75px;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <!-- Adjust top to simulate padding. -->
+ <header style="inset-block-start: 5px"></header><nav style="inset-block-start: 5px"></nav>
+ <article style="inset-block-start: 20px"></article><footer style="inset-block-start: 10px"></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header style="inline-size: 22px; inset-block-start: 5px"></header>
+ <nav style="inline-size: 22px; inset-block-start: 5px; inset-inline-start: 26px"></nav>
+ <article style="inline-size: 22px; inset-block-start: 20px; inset-inline-start: 52px;"></article>
+ <footer style="inline-size: 22px; inset-block-start: 10px; inset-inline-start: 78px;"></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2.html
new file mode 100644
index 0000000000..51a996eafd
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-2.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-rl-2-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. The block-size of the flex container is made shorter than <header>.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid lightgray;
+ /* Block-size is deliberately made shorter than <header>. */
+ block-size: 80px;
+ }
+ .border-padding {
+ border-block-width: 10px;
+ padding-block: 5px;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Basic one without any margin/border/padding. -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border and padding. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3-ref.html
new file mode 100644
index 0000000000..f71268870d
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3-ref.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of single-line row flex container</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 50px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ padding-block: 15px;
+ }
+ .flexContainer {
+ background: gray;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 solid white;
+ block-size: 100px;
+ position: relative;
+ }
+ .gap {
+ inline-size: 4px;
+ block-size: 100%;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ inline-size: 25px;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ position: absolute;
+ inset-block-start: 0px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ position: absolute;
+ inset-block-start: 0px;
+ inset-inline-start: 25px;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ position: absolute;
+ inset-block-start: 25px;
+ inset-inline-start: 50px;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ position: absolute;
+ inset-block-start: 25px;
+ inset-inline-start: 75px;
+ }
+ </style>
+
+ <body>
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with border, padding, and column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer border-padding">
+ <header style="inline-size: 22px"></header>
+ <nav style="inline-size: 22px; inset-inline-start: 26px"></nav>
+ <article style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 52px;"></article>
+ <footer style="inline-size: 22px; inset-block-start: 25px; inset-inline-start: 78px;"></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3a.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3a.html
new file mode 100644
index 0000000000..6d4fb10d60
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3a.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line row flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-rl-3-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, column-gap, and box-decoration-break:clone.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ background: gray;
+ border: 0 solid white;
+ border-block-width: 15px;
+ box-decoration-break: clone;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ header {
+ background: cyan;
+ block-size: 100px;
+ }
+ nav {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ article {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ footer {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3b.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3b.html
new file mode 100644
index 0000000000..cdd15cddeb
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-3b.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto and box-decoration-break:clone single-line row-reverse flex container with fixed block-size flex items</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-rl-3-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row-reverse flex container, with various combinations of margin/border/padding, alignments, column-gap, and box-decoration-break:clone.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ block-size: 80px;
+ inline-size: 320px;
+ column-count: 3;
+ column-fill: auto;
+ column-gap: 10px;
+ border: 5px solid orange;
+ margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
+ }
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row-reverse;
+ background: gray;
+ border: 0 solid white;
+ border-block-width: 15px;
+ box-decoration-break: clone;
+ }
+
+ /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
+ header, nav, article, footer {
+ flex-grow: 1;
+ }
+ footer {
+ background: cyan;
+ block-size: 100px;
+ }
+ article {
+ background: magenta;
+ block-size: 25px;
+ align-self: flex-start;
+ }
+ nav {
+ background: yellow;
+ block-size: 50px;
+ align-self: center;
+ }
+ header {
+ background: black;
+ block-size: 75px;
+ align-self: flex-end;
+ }
+ </style>
+
+ <body>
+ <!-- Test a container with margin-block-start. -->
+ <div class="multicol">
+ <div class="flexContainer" style="margin-block-start: 25px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container not at the top of the column/page. -->
+ <div class="multicol">
+ <div style="block-size: 25px"></div>
+ <div class="flexContainer">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+
+ <!-- Test a container with column-gap. -->
+ <div class="multicol">
+ <div class="flexContainer" style="column-gap: 4px">
+ <header></header><nav></nav><article></article><footer></footer>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4-ref.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4-ref.html
new file mode 100644
index 0000000000..1e9e887f95
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test Reference: Fragmentation of block-size:auto single-line row flex container in a zero block-size multicol</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ column-count: 2;
+ block-size: 0;
+ border: 1px solid black;
+ margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+ }
+
+ .flexContainer {
+ display: block;
+ padding: 1px;
+ }
+
+ .boxDecorationBreak {
+ padding: 5px;
+ box-decoration-break: clone;
+ }
+
+ </style>
+
+ <body>
+ <!-- Basic one with padding on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div>abcdef</div>
+ </div>
+ </div>
+
+ <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer boxDecorationBreak">
+ <div>abcdef</div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4.html b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4.html
new file mode 100644
index 0000000000..c8e4293e3e
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-single-row-vertical-rl-4.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line row flex container in a zero block-size multicol</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+ <link rel="match" href="flexbox-single-row-vertical-rl-4-ref.html">
+ <meta name="assert" content="This test verifies fragmentation of flex containers can make progress in a zero block-size multicol.">
+
+ <style>
+ html {
+ writing-mode: vertical-rl;
+ }
+ .multicol {
+ column-count: 2;
+ block-size: 0;
+ border: 1px solid black;
+ margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
+ }
+
+ .flexContainer {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ padding: 1px;
+ }
+
+ .boxDecorationBreak {
+ padding: 5px;
+ box-decoration-break: clone;
+ }
+
+ </style>
+
+ <body>
+ <!-- Basic one with padding on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div>abc</div><div>def</div>
+ </div>
+ </div>
+
+ <!-- Larger padding and box-decoration-break:clone on the flex container.-->
+ <div class="multicol">
+ <div class="flexContainer boxDecorationBreak">
+ <div>abc</div><div>def</div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html
new file mode 100644
index 0000000000..b9892af217
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 30px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ display: block;
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html
new file mode 100644
index 0000000000..e12e39ace1
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: row" and
+ "flex-wrap: wrap".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 30px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html
new file mode 100644
index 0000000000..2dde592514
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: row".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 30px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html
new file mode 100644
index 0000000000..5e5aa0ba7d
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: row-reverse" and
+ "flex-wrap: wrap".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 30px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row-reverse;
+ flex-wrap: wrap;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html
new file mode 100644
index 0000000000..2ea73ddfb7
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: row-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 30px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row-reverse;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html
new file mode 100644
index 0000000000..47a01df2cb
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: column" and
+ "flex-wrap: wrap".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 30px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ flex: none;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html
new file mode 100644
index 0000000000..9aeda66e04
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: column".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 30px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ flex: none;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html
new file mode 100644
index 0000000000..c9c7f484ba
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: column-reverse"
+ and "flex-wrap: wrap".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 30px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ flex: none;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html
new file mode 100644
index 0000000000..adb1447519
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: column-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 30px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ justify-content: flex-end;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ flex: none;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html
new file mode 100644
index 0000000000..458ddd8cd1
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with several children in a
+ multi-line vertical flexbox.
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 38px;
+ width: 100px;
+ column-width: 60px;
+ column-fill: auto;
+ border: 2px solid purple;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ background: yellow;
+ }
+ .item {
+ width: 40px;
+ height: 15px;
+ border: 1px dotted teal;
+ margin: 1px;
+ font: 10px serif;
+ float: left;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: calc(19px*3)">
+ <div style="width: 50px">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+ </div>
+ </div>
+ </div>
+
+ <!-- auto-height container, with enough children that our last flex line
+ overflows (in the cross axis) -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: calc(19px*5)">
+ <div style="width: 50px">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+ <div class="item">4</div>
+ <div class="item">5</div>
+ </div>
+ </div>
+ </div>
+
+ <!-- fixed-height container-->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 70px">
+ <div style="width: 50px">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+ </div>
+ </div>
+ </div>
+
+ <!-- fixed-height container, with enough children that our last flex line
+ overflows (in the cross axis) -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 70px">
+ <div style="width: 100px">
+ <div class="item">1</div>
+ <div class="item">4</div>
+ <div class="item">2</div>
+ <div class="item">5</div>
+ <div class="item">3</div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html
new file mode 100644
index 0000000000..5989681ae4
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with several children in a
+ multi-line vertical flexbox.
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 38px;
+ width: 100px;
+ column-width: 60px;
+ column-fill: auto;
+ border: 2px solid purple;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-content: flex-start;
+ background: yellow;
+ }
+ .item {
+ width: 40px;
+ height: 15px;
+ border: 1px dotted teal;
+ margin: 1px;
+ font: 10px serif;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+ </div>
+ </div>
+
+ <!-- auto-height container, with enough children that our last flex line
+ overflows (in the cross axis) -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+ <div class="item">4</div>
+ <div class="item">5</div>
+ </div>
+ </div>
+
+ <!-- fixed-height container-->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 70px">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+ </div>
+ </div>
+
+ <!-- fixed-height container, with enough children that our last flex line
+ overflows (in the cross axis) -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 70px">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+ <div class="item">4</div>
+ <div class="item">5</div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3-ref.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3-ref.html
new file mode 100644
index 0000000000..e21ddc8d23
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3-ref.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ position: relative;
+ }
+ .flexContainer {
+ width: 40px;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .continuation {
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+ .item {
+ display: block;
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ <div class="flexContainer continuation" style="height: 0px"></div>
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ <div class="flexContainer continuation" style="height: 0px"></div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ <div class="flexContainer continuation" style="height: 4px"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a-wrap.html
new file mode 100644
index 0000000000..074a676db5
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a-wrap.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: row",
+ "flex-wrap: wrap", and "box-decoration-break: clone".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 30px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ background: teal;
+ border: 1px dashed black;
+ box-decoration-break: clone;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a.html
new file mode 100644
index 0000000000..2196040388
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3a.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: row" and
+ "box-decoration-break: clone".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 30px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row;
+ background: teal;
+ border: 1px dashed black;
+ box-decoration-break: clone;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b-wrap.html
new file mode 100644
index 0000000000..3dbec66a67
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b-wrap.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: row-reverse",
+ "flex-wrap: wrap" and "box-decoration-break: clone".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 30px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row-reverse;
+ flex-wrap: wrap;
+ background: teal;
+ border: 1px dashed black;
+ box-decoration-break: clone;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b.html
new file mode 100644
index 0000000000..b3f3211633
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3b.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: row-reverse" and
+ "box-decoration-break: clone".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 30px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row-reverse;
+ background: teal;
+ border: 1px dashed black;
+ box-decoration-break: clone;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c-wrap.html
new file mode 100644
index 0000000000..0a36b822f2
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c-wrap.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: column",
+ "flex-wrap: wrap", and "box-decoration-break: clone".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 30px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ background: teal;
+ border: 1px dashed black;
+ box-decoration-break: clone;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ flex: none;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c.html
new file mode 100644
index 0000000000..80a35406dd
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3c.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: column" and
+ "box-decoration-break: clone".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 30px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ background: teal;
+ border: 1px dashed black;
+ box-decoration-break: clone;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ flex: none;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d-wrap.html
new file mode 100644
index 0000000000..c76e8d12a8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d-wrap.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: column-reverse",
+ "flex-wrap: wrap" and "box-decoration-break: clone".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 30px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ background: teal;
+ border: 1px dashed black;
+ box-decoration-break: clone;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ flex: none;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d.html
new file mode 100644
index 0000000000..f78ad833bf
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-3d.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: column-reverse" and
+ "box-decoration-break: clone".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ column-width: 30px;
+ column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ justify-content: flex-end;
+ background: teal;
+ border: 1px dashed black;
+ box-decoration-break: clone;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ flex: none;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/reftest.list b/layout/reftests/flexbox/pagination/reftest.list
new file mode 100644
index 0000000000..cb5e5e9a57
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/reftest.list
@@ -0,0 +1,214 @@
+# Tests with an empty flex container being fragmented:
+== flexbox-empty-1a.html flexbox-empty-1-ref.html
+== flexbox-empty-1b.html flexbox-empty-1-ref.html
+== flexbox-empty-1c.html flexbox-empty-1-ref.html
+== flexbox-empty-1d.html flexbox-empty-1-ref.html
+
+# Tests with an empty flex container that overflows a short fixed-height block
+# being fragmented:
+== flexbox-empty-1e.html flexbox-empty-1-ref.html
+== flexbox-empty-1f.html flexbox-empty-1-ref.html
+== flexbox-empty-1g.html flexbox-empty-1-ref.html
+== flexbox-empty-1h.html flexbox-empty-1-ref.html
+
+# Tests with an empty flex container being fragmented, with margin, border,
+# and/or padding being taller than the available height:
+fuzzy-if(Android,0-128,0-10) == flexbox-empty-2a.html flexbox-empty-2-ref.html
+fuzzy-if(Android,0-128,0-10) == flexbox-empty-2b.html flexbox-empty-2-ref.html
+fuzzy-if(Android,0-128,0-10) == flexbox-empty-2c.html flexbox-empty-2-ref.html
+fuzzy-if(Android,0-128,0-10) == flexbox-empty-2d.html flexbox-empty-2-ref.html
+
+# Tests for how we fragment a flex container with one unbreakable child
+== flexbox-unbreakable-child-1a.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1a-wrap.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1b.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1b-wrap.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1c.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1c-wrap.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1d.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1d-wrap.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-2.html flexbox-unbreakable-child-2-ref.html
+
+# Tests for how we fragment a flex container with one unbreakable child and
+# "box-decoration-break: clone"
+== flexbox-unbreakable-child-3a.html flexbox-unbreakable-child-3-ref.html
+== flexbox-unbreakable-child-3a-wrap.html flexbox-unbreakable-child-3-ref.html
+== flexbox-unbreakable-child-3b.html flexbox-unbreakable-child-3-ref.html
+== flexbox-unbreakable-child-3b-wrap.html flexbox-unbreakable-child-3-ref.html
+== flexbox-unbreakable-child-3c.html flexbox-unbreakable-child-3-ref.html
+== flexbox-unbreakable-child-3c-wrap.html flexbox-unbreakable-child-3-ref.html
+== flexbox-unbreakable-child-3d.html flexbox-unbreakable-child-3-ref.html
+== flexbox-unbreakable-child-3d-wrap.html flexbox-unbreakable-child-3-ref.html
+
+# Tests for how we fragment flex items in a single-line column flex container.
+== flexbox-single-column-1a.html flexbox-single-column-1-ref.html
+== flexbox-single-column-1b.html flexbox-single-column-1-ref.html
+== flexbox-single-column-1c.html flexbox-single-column-1-ref.html
+== flexbox-single-column-1d.html flexbox-single-column-1-ref.html
+== flexbox-single-column-1e.html flexbox-single-column-1-ref.html
+== flexbox-single-column-1f.html flexbox-single-column-1-ref.html
+== flexbox-single-column-1g.html flexbox-single-column-1-ref.html
+== flexbox-single-column-1h.html flexbox-single-column-1-ref.html
+== flexbox-single-column-1i.html flexbox-single-column-1-ref.html
+== flexbox-single-column-1j.html flexbox-single-column-1-ref.html
+== flexbox-single-column-2.html flexbox-single-column-2-ref.html
+== flexbox-single-column-3a.html flexbox-single-column-3-ref.html
+== flexbox-single-column-3b.html flexbox-single-column-3-ref.html
+== flexbox-single-column-4.html flexbox-single-column-4-ref.html
+== flexbox-single-column-5.html flexbox-single-column-5-ref.html
+== flexbox-single-column-6.html flexbox-single-column-6-ref.html
+
+# Tests for how we fragment flex items in a single-line column flex container
+# under "writing-mode: vertical-lr".
+== flexbox-single-column-vertical-lr-1a.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-1b.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-1c.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-1d.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-1e.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-1f.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-1g.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-1h.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-1i.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-1j.html flexbox-single-column-vertical-lr-1-ref.html
+== flexbox-single-column-vertical-lr-2.html flexbox-single-column-vertical-lr-2-ref.html
+== flexbox-single-column-vertical-lr-3a.html flexbox-single-column-vertical-lr-3-ref.html
+== flexbox-single-column-vertical-lr-3b.html flexbox-single-column-vertical-lr-3-ref.html
+== flexbox-single-column-vertical-lr-4.html flexbox-single-column-vertical-lr-4-ref.html
+== flexbox-single-column-vertical-lr-5.html flexbox-single-column-vertical-lr-5-ref.html
+== flexbox-single-column-vertical-lr-6.html flexbox-single-column-vertical-lr-6-ref.html
+
+# Tests for how we fragment flex items in a single-line column flex container
+# under "writing-mode: vertical-rl".
+== flexbox-single-column-vertical-rl-1a.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-1b.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-1c.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-1d.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-1e.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-1f.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-1g.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-1h.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-1i.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-1j.html flexbox-single-column-vertical-rl-1-ref.html
+== flexbox-single-column-vertical-rl-2.html flexbox-single-column-vertical-rl-2-ref.html
+== flexbox-single-column-vertical-rl-3a.html flexbox-single-column-vertical-rl-3-ref.html
+== flexbox-single-column-vertical-rl-3b.html flexbox-single-column-vertical-rl-3-ref.html
+== flexbox-single-column-vertical-rl-4.html flexbox-single-column-vertical-rl-4-ref.html
+== flexbox-single-column-vertical-rl-5.html flexbox-single-column-vertical-rl-5-ref.html
+== flexbox-single-column-vertical-rl-6.html flexbox-single-column-vertical-rl-6-ref.html
+
+# Tests for how we fragment flex items in a multi-line column flex container.
+== flexbox-multi-column-1a.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-1b.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-1c.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-1d.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-1e.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-1f.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-1g.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-1h.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-1i.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-1j.html flexbox-multi-column-1-ref.html
+== flexbox-multi-column-2.html flexbox-multi-column-2-ref.html
+
+# Tests for how we fragment flex items in a multi-line column flex container
+# under "writing-mode: vertical-lr".
+== flexbox-multi-column-vertical-lr-1a.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-1b.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-1c.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-1d.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-1e.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-1f.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-1g.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-1h.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-1i.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-1j.html flexbox-multi-column-vertical-lr-1-ref.html
+== flexbox-multi-column-vertical-lr-2.html flexbox-multi-column-vertical-lr-2-ref.html
+
+# Tests for how we fragment flex items in a multi-line column flex container
+# under "writing-mode: vertical-rl".
+== flexbox-multi-column-vertical-rl-1a.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-1b.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-1c.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-1d.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-1e.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-1f.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-1g.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-1h.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-1i.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-1j.html flexbox-multi-column-vertical-rl-1-ref.html
+== flexbox-multi-column-vertical-rl-2.html flexbox-multi-column-vertical-rl-2-ref.html
+
+# Tests for how we fragment flex items in a single-line row flex container.
+== flexbox-single-row-1a.html flexbox-single-row-1-ref.html
+== flexbox-single-row-1b.html flexbox-single-row-1-ref.html
+== flexbox-single-row-1c.html flexbox-single-row-1-ref.html
+== flexbox-single-row-1d.html flexbox-single-row-1-ref.html
+== flexbox-single-row-1e.html flexbox-single-row-1-ref.html
+== flexbox-single-row-1f.html flexbox-single-row-1-ref.html
+== flexbox-single-row-1g.html flexbox-single-row-1-ref.html
+== flexbox-single-row-1h.html flexbox-single-row-1-ref.html
+== flexbox-single-row-2.html flexbox-single-row-2-ref.html
+== flexbox-single-row-3a.html flexbox-single-row-3-ref.html
+== flexbox-single-row-3b.html flexbox-single-row-3-ref.html
+== flexbox-single-row-4.html flexbox-single-row-4-ref.html
+
+# Tests for how we fragment flex items in a single-line row flex container
+# under "writing-mode: vertical-lr".
+== flexbox-single-row-vertical-lr-1a.html flexbox-single-row-vertical-lr-1-ref.html
+== flexbox-single-row-vertical-lr-1b.html flexbox-single-row-vertical-lr-1-ref.html
+== flexbox-single-row-vertical-lr-1c.html flexbox-single-row-vertical-lr-1-ref.html
+== flexbox-single-row-vertical-lr-1d.html flexbox-single-row-vertical-lr-1-ref.html
+== flexbox-single-row-vertical-lr-1e.html flexbox-single-row-vertical-lr-1-ref.html
+== flexbox-single-row-vertical-lr-1f.html flexbox-single-row-vertical-lr-1-ref.html
+== flexbox-single-row-vertical-lr-1g.html flexbox-single-row-vertical-lr-1-ref.html
+== flexbox-single-row-vertical-lr-1h.html flexbox-single-row-vertical-lr-1-ref.html
+== flexbox-single-row-vertical-lr-2.html flexbox-single-row-vertical-lr-2-ref.html
+== flexbox-single-row-vertical-lr-3a.html flexbox-single-row-vertical-lr-3-ref.html
+== flexbox-single-row-vertical-lr-3b.html flexbox-single-row-vertical-lr-3-ref.html
+== flexbox-single-row-vertical-lr-4.html flexbox-single-row-vertical-lr-4-ref.html
+
+# Tests for how we fragment flex items in a single-line row flex container
+# under "writing-mode: vertical-rl".
+== flexbox-single-row-vertical-rl-1a.html flexbox-single-row-vertical-rl-1-ref.html
+== flexbox-single-row-vertical-rl-1b.html flexbox-single-row-vertical-rl-1-ref.html
+== flexbox-single-row-vertical-rl-1c.html flexbox-single-row-vertical-rl-1-ref.html
+== flexbox-single-row-vertical-rl-1d.html flexbox-single-row-vertical-rl-1-ref.html
+== flexbox-single-row-vertical-rl-1e.html flexbox-single-row-vertical-rl-1-ref.html
+== flexbox-single-row-vertical-rl-1f.html flexbox-single-row-vertical-rl-1-ref.html
+== flexbox-single-row-vertical-rl-1g.html flexbox-single-row-vertical-rl-1-ref.html
+== flexbox-single-row-vertical-rl-1h.html flexbox-single-row-vertical-rl-1-ref.html
+== flexbox-single-row-vertical-rl-2.html flexbox-single-row-vertical-rl-2-ref.html
+== flexbox-single-row-vertical-rl-3a.html flexbox-single-row-vertical-rl-3-ref.html
+== flexbox-single-row-vertical-rl-3b.html flexbox-single-row-vertical-rl-3-ref.html
+== flexbox-single-row-vertical-rl-4.html flexbox-single-row-vertical-rl-4-ref.html
+
+# Tests for how we fragment flex items in a multi-line row flex container.
+== flexbox-multi-row-1a.html flexbox-multi-row-1-ref.html
+== flexbox-multi-row-1b.html flexbox-multi-row-1-ref.html
+== flexbox-multi-row-1c.html flexbox-multi-row-1-ref.html
+== flexbox-multi-row-1d.html flexbox-multi-row-1-ref.html
+== flexbox-multi-row-1e.html flexbox-multi-row-1-ref.html
+== flexbox-multi-row-1f.html flexbox-multi-row-1-ref.html
+== flexbox-multi-row-2a.html flexbox-multi-row-2-ref.html
+== flexbox-multi-row-2b.html flexbox-multi-row-2-ref.html
+
+# Tests for how we fragment flex items in a multi-line row flex container.
+# under "writing-mode: vertical-lr".
+== flexbox-multi-row-vertical-lr-1a.html flexbox-multi-row-vertical-lr-1-ref.html
+== flexbox-multi-row-vertical-lr-1b.html flexbox-multi-row-vertical-lr-1-ref.html
+== flexbox-multi-row-vertical-lr-1c.html flexbox-multi-row-vertical-lr-1-ref.html
+== flexbox-multi-row-vertical-lr-1d.html flexbox-multi-row-vertical-lr-1-ref.html
+== flexbox-multi-row-vertical-lr-1e.html flexbox-multi-row-vertical-lr-1-ref.html
+== flexbox-multi-row-vertical-lr-1f.html flexbox-multi-row-vertical-lr-1-ref.html
+== flexbox-multi-row-vertical-lr-2a.html flexbox-multi-row-vertical-lr-2-ref.html
+== flexbox-multi-row-vertical-lr-2b.html flexbox-multi-row-vertical-lr-2-ref.html
+
+# Tests for how we fragment flex items in a multi-line row flex container.
+# under "writing-mode: vertical-rl".
+== flexbox-multi-row-vertical-rl-1a.html flexbox-multi-row-vertical-rl-1-ref.html
+== flexbox-multi-row-vertical-rl-1b.html flexbox-multi-row-vertical-rl-1-ref.html
+== flexbox-multi-row-vertical-rl-1c.html flexbox-multi-row-vertical-rl-1-ref.html
+== flexbox-multi-row-vertical-rl-1d.html flexbox-multi-row-vertical-rl-1-ref.html
+== flexbox-multi-row-vertical-rl-1e.html flexbox-multi-row-vertical-rl-1-ref.html
+== flexbox-multi-row-vertical-rl-1f.html flexbox-multi-row-vertical-rl-1-ref.html
+== flexbox-multi-row-vertical-rl-2a.html flexbox-multi-row-vertical-rl-2-ref.html
+== flexbox-multi-row-vertical-rl-2b.html flexbox-multi-row-vertical-rl-2-ref.html
diff --git a/layout/reftests/flexbox/reftest.list b/layout/reftests/flexbox/reftest.list
new file mode 100644
index 0000000000..dbd6c705cd
--- /dev/null
+++ b/layout/reftests/flexbox/reftest.list
@@ -0,0 +1,127 @@
+# NOTE: Most of our flexbox tests have moved to the w3c-css reftest directory.
+# The tests that remain in *this* directory are still here because either:
+# a) They (or one of their closely-related tests) use some moz-prefixed
+# feature, e.g. MozReftestInvalidate.
+# ...or...
+# b) They test a feature that has known bugs (e.g. bug 874713)
+#
+# Where possible & practical, we should try to address these so we can migrate
+# tests over to the w3c-css directory, so that they can become part of the
+# W3C's test suite.
+
+# SUBDIRECTORY: Reftests for paginated flex containers
+include pagination/reftest.list
+
+# Tests for cross-axis alignment (align-self / align-items properties)
+fails == flexbox-align-self-baseline-horiz-2.xhtml flexbox-align-self-baseline-horiz-2-ref.xhtml # bug 793456, and possibly others
+== flexbox-align-self-baseline-horiz-3.xhtml flexbox-align-self-baseline-horiz-3-ref.xhtml
+== flexbox-align-self-baseline-horiz-4.xhtml flexbox-align-self-baseline-horiz-4-ref.xhtml
+== flexbox-item-align-self-dynamic-pos-001.html flexbox-item-align-self-dynamic-pos-001-ref.html
+== flexbox-item-align-self-dynamic-pos-002.html flexbox-item-align-self-dynamic-pos-002-ref.html
+
+# Tests for box-sizing on flex containers and flex items.
+== flexbox-box-sizing-on-container-horiz-1.html flexbox-box-sizing-on-container-horiz-1-ref.html
+== flexbox-box-sizing-on-container-vert-1.html flexbox-box-sizing-on-container-vert-1-ref.html
+== flexbox-box-sizing-on-items-horiz-1a.html flexbox-box-sizing-on-items-horiz-1-ref.html
+== flexbox-box-sizing-on-items-horiz-1b.html flexbox-box-sizing-on-items-horiz-1-ref.html
+== flexbox-box-sizing-on-items-vert-1a.html flexbox-box-sizing-on-items-vert-1-ref.html
+== flexbox-box-sizing-on-items-vert-1b.html flexbox-box-sizing-on-items-vert-1-ref.html
+
+# Tests for dynamic modifications of content inside/around a flex container
+== flexbox-dyn-changeContent-1.html flexbox-dyn-changeContent-1-ref.html
+== flexbox-dyn-changeContent-2.html flexbox-dyn-changeContent-2-ref.html
+== flexbox-dyn-changeFrameWidth-1.xhtml flexbox-dyn-changeFrameWidth-1-ref.xhtml
+== flexbox-dyn-changeFrameWidth-2.xhtml flexbox-dyn-changeFrameWidth-2-ref.xhtml
+== flexbox-dyn-changeFrameWidth-3.xhtml flexbox-dyn-changeFrameWidth-3-ref.xhtml
+== flexbox-dyn-changeFrameWidth-4.xhtml flexbox-dyn-changeFrameWidth-4-ref.xhtml
+== flexbox-dyn-changeOrder-1a.html flexbox-dyn-changeOrder-1-ref.html
+== flexbox-dyn-changeOrder-1b.html flexbox-dyn-changeOrder-1-ref.html
+== flexbox-dyn-changePadding-1a.xhtml flexbox-dyn-changePadding-1-ref.xhtml
+== flexbox-dyn-changePadding-1b.xhtml flexbox-dyn-changePadding-1-ref.xhtml
+
+# Tests for dynamic insertions of content into a flex container
+# (with existing [div | span | text] inside the flexbox, and new content
+# inserted adjacent to that existing content.)
+fuzzy(0-3,0-10) == flexbox-dyn-insertAroundDiv-1.xhtml flexbox-dyn-insertAroundDiv-1-ref.xhtml
+== flexbox-dyn-insertAroundDiv-2.xhtml flexbox-dyn-insertAroundDiv-2-ref.xhtml
+fuzzy(0-3,0-10) == flexbox-dyn-insertAroundDiv-3.xhtml flexbox-dyn-insertAroundDiv-3-ref.xhtml
+
+fuzzy(0-3,0-10) == flexbox-dyn-insertAroundSpan-1.xhtml flexbox-dyn-insertAroundDiv-1-ref.xhtml
+== flexbox-dyn-insertAroundSpan-2.xhtml flexbox-dyn-insertAroundDiv-2-ref.xhtml
+fuzzy(0-3,0-10) == flexbox-dyn-insertAroundSpan-3.xhtml flexbox-dyn-insertAroundDiv-3-ref.xhtml
+
+== flexbox-dyn-insertAroundText-1.xhtml flexbox-dyn-insertAroundText-1-ref.xhtml
+== flexbox-dyn-insertAroundText-2.xhtml flexbox-dyn-insertAroundText-2-ref.xhtml
+== flexbox-dyn-insertAroundText-3.xhtml flexbox-dyn-insertAroundText-3-ref.xhtml
+
+# Variant of one of the above tests, to regression-test an invalidation issue
+== flexbox-dyn-insertEmptySpan-1.xhtml flexbox-dyn-insertEmptySpan-1-ref.xhtml
+
+# Tests for empty flexboxes (with no flex items)
+== flexbox-empty-1a.xhtml flexbox-empty-1-ref.xhtml
+== flexbox-empty-1b.xhtml flexbox-empty-1-ref.xhtml
+== flexbox-empty-container-synthesized-baseline-001.html flexbox-empty-container-synthesized-baseline-001-ref.html
+
+# Tests for handling of floated elements inside a flexbox
+== flexbox-float-1a.xhtml flexbox-float-1-ref.xhtml
+== flexbox-float-1b.xhtml flexbox-float-1-ref.xhtml
+== flexbox-float-1c.xhtml flexbox-float-1-ref.xhtml
+== flexbox-float-1d.xhtml flexbox-float-1-ref.xhtml
+== flexbox-float-2a.xhtml flexbox-float-2-ref.xhtml
+== flexbox-float-2b.xhtml flexbox-float-2-ref.xhtml
+
+# Tests for handling of absolutely/fixed/relatively-positioned flex items.
+== flexbox-position-absolute-1.xhtml flexbox-position-absolute-1-ref.xhtml
+== flexbox-position-absolute-2.xhtml flexbox-position-absolute-2-ref.xhtml
+== flexbox-position-absolute-3.xhtml flexbox-position-absolute-3-ref.xhtml
+== flexbox-position-absolute-4.xhtml flexbox-position-absolute-4-ref.xhtml
+== flexbox-position-fixed-3.xhtml flexbox-position-fixed-3-ref.xhtml
+fuzzy-if(Android,0-16,0-400) == flexbox-position-fixed-1.xhtml flexbox-position-fixed-1-ref.xhtml
+fuzzy-if(Android,0-16,0-400) == flexbox-position-fixed-2.xhtml flexbox-position-fixed-2-ref.xhtml
+== flexbox-position-fixed-3.xhtml flexbox-position-fixed-3-ref.xhtml
+== flexbox-position-fixed-4.xhtml flexbox-position-fixed-4-ref.xhtml
+
+# Tests for inline content in a flexbox that gets wrapped in an anonymous block
+fails == flexbox-inlinecontent-horiz-1a.xhtml flexbox-inlinecontent-horiz-1-ref.xhtml # reference case rendering is incorrect; bug 858333
+fails == flexbox-inlinecontent-horiz-1b.xhtml flexbox-inlinecontent-horiz-1-ref.xhtml # reference case rendering is incorrect; bug 858333
+== flexbox-inlinecontent-horiz-2.xhtml flexbox-inlinecontent-horiz-2-ref.xhtml
+== flexbox-inlinecontent-horiz-3a.xhtml flexbox-inlinecontent-horiz-3-ref.xhtml
+== flexbox-inlinecontent-horiz-3b.xhtml flexbox-inlinecontent-horiz-3-ref.xhtml
+== flexbox-inlinecontent-horiz-3c.xhtml flexbox-inlinecontent-horiz-3-ref.xhtml
+== flexbox-inlinecontent-horiz-4.xhtml flexbox-inlinecontent-horiz-4-ref.xhtml
+== flexbox-inlinecontent-horiz-5.xhtml flexbox-inlinecontent-horiz-5-ref.xhtml
+
+# Tests for intrinsic sizing of flexboxes
+== flexbox-intrinsic-sizing-horiz-1a.xhtml flexbox-intrinsic-sizing-horiz-1-ref.xhtml
+== flexbox-intrinsic-sizing-horiz-1b.xhtml flexbox-intrinsic-sizing-horiz-1-ref.xhtml
+== flexbox-intrinsic-sizing-horiz-2a.xhtml flexbox-intrinsic-sizing-horiz-2-ref.xhtml
+== flexbox-intrinsic-sizing-horiz-2b.xhtml flexbox-intrinsic-sizing-horiz-2-ref.xhtml
+
+# Tests for invalidation after dynamic modifications
+== flexbox-invalidation-1.html flexbox-invalidation-1-ref.html
+
+# Tests for flexbox in an iframe that gets resized.
+fuzzy(0-1,0-8) fuzzy-if(cocoaWidget,0-1,0-14) == flexbox-resizeviewport-1.xhtml flexbox-resizeviewport-1-ref.xhtml
+fuzzy(0-1,0-5) == flexbox-resizeviewport-2.xhtml flexbox-resizeviewport-2-ref.xhtml
+
+# Tests for flexbox styling on things that don't support it
+== flexbox-styling-on-svg-1.svg flexbox-styling-on-svg-1-ref.svg
+
+# Tests with widgets as flex items
+fuzzy(0-1,0-1) == flexbox-widget-flex-items-1.html flexbox-widget-flex-items-1-ref.html
+fuzzy(0-1,0-19) fuzzy-if(swgl,0-26,0-20) == flexbox-widget-flex-items-2.html flexbox-widget-flex-items-2-ref.html
+skip-if(gtkWidget) fuzzy(0-6,0-8) == flexbox-widget-flex-items-3.html flexbox-widget-flex-items-3-ref.html # bug 1260965 for gtk
+fuzzy-if(gtkWidget,0-1,0-31) == flexbox-widget-flex-items-4.html flexbox-widget-flex-items-4-ref.html
+
+# Tests for table flex items
+== flexbox-table-flex-items-1.html flexbox-table-flex-items-1-ref.html
+== flexbox-table-flex-items-2.html flexbox-table-flex-items-2-ref.html
+== flexbox-table-flex-items-3.html flexbox-table-flex-items-3-ref.html
+== flexbox-table-flex-items-4.html flexbox-table-flex-items-4-ref.html
+== flexbox-table-flex-items-5.html flexbox-table-flex-items-5-ref.html
+
+# Tests for Bug 1500627. Keywords on min-height (block size) should behave as
+# the initial value. (i.e. auto)
+== flexbox-min-bsize-keywords-vert-1.html flexbox-min-bsize-keywords-vert-1-ref.html
+== flexbox-min-bsize-keywords-horiz-1.html flexbox-min-bsize-keywords-horiz-1-ref.html
+== flexbox-bsize-keywords-no-stretch-1.html flexbox-bsize-keywords-no-stretch-1-ref.html
diff --git a/layout/reftests/flexbox/solidblue.png b/layout/reftests/flexbox/solidblue.png
new file mode 100644
index 0000000000..a64b6a4255
--- /dev/null
+++ b/layout/reftests/flexbox/solidblue.png
Binary files differ