2 <!-- Any copyright is dedicated to the Public Domain.
3 http://creativecommons.org/publicdomain/zero/1.0/ -->
6 <title>CSS Flexbox Test: Fragmentation of block-size:auto multi-line row-reverse flex container with fixed block-size flex items
</title>
7 <link rel=
"author" title=
"Ting-Yu Lin" href=
"mailto:tlin@mozilla.com">
8 <link rel=
"author" title=
"Mozilla" href=
"http://www.mozilla.org/">
9 <link rel=
"help" href=
"https://drafts.csswg.org/css-flexbox-1/#pagination">
10 <link rel=
"match" href=
"flexbox-multi-row-1-ref.html">
11 <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.">
20 border:
5px solid orange;
21 margin-block-end:
5px; /* Just to separate each sub-testcase visually. */
25 flex-wrap: wrap-reverse;
26 flex-direction: row-reverse;
28 /* border-width is
0 by default; some sub-testcases will increase it. */
29 border:
0 solid lightgray;
32 border-block-width:
10px;
40 header, nav, article, footer {
43 .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
47 /* Note: flex items are in visual order as
"CMYK": cyan, magenta, yellow, black. */
65 align-self: flex-start;
68 body.multicol-children-block-size
> .multicol {
75 document
.body
.offsetHeight
;
77 /* Enlarge the multicol's block-size to exercise pulling and pushing flex items
78 of an already fragmented flex container. */
79 document
.body
.classList
.add("multicol-children-block-size");
83 <body onload=
"runTest()">
84 <!-- Basic one without any margin/border/padding. -->
85 <div class=
"multicol">
86 <div class=
"flexContainer">
87 <header></header><nav></nav><article></article><footer></footer>
91 <!-- Test a container with margin-block-start. -->
92 <div class=
"multicol">
93 <div class=
"flexContainer" style=
"margin-block-start: 25px">
94 <header></header><nav></nav><article></article><footer></footer>
98 <!-- Test a container not at the top of the column/page. -->
99 <div class=
"multicol">
100 <div style=
"block-size: 25px"></div>
101 <div class=
"flexContainer">
102 <header></header><nav></nav><article></article><footer></footer>
106 <!-- Test a container with border and padding. -->
107 <div class=
"multicol">
108 <div class=
"flexContainer border-padding">
109 <header></header><nav></nav><article></article><footer></footer>
113 <!-- Test a container with border, padding, and gap. -->
114 <div class=
"multicol">
115 <div class=
"flexContainer border-padding with-gap">
116 <header></header><nav></nav><article></article><footer></footer>