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 single-line column flex container with block-size:auto 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-single-column-1-ref.html">
11 <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.">
20 border:
5px solid orange;
21 margin-block-end:
5px; /* Just to separate each sub-testcase visually. */
26 flex-direction: column;
28 /* border-width is
0 by default; some sub-testcases will increase it. */
29 border:
0 solid lightgray;
32 border-block-width:
10px;
36 /* Note: flex items are in visual order as
"CMYK": cyan, magenta, yellow, black. */
43 nav, article, footer {
48 align-self: flex-start;
70 <!-- Basic one without any margin/border/padding. -->
71 <div class=
"multicol">
72 <div class=
"flexContainer">
73 <header><div></div></header><nav><div></div></nav>
74 <article><div></div></article><footer><div></div></footer>
78 <!-- Test a container with margin-block-start. -->
79 <div class=
"multicol">
80 <div class=
"flexContainer" style=
"margin-block-start: 25px">
81 <header><div></div></header><nav><div></div></nav>
82 <article><div></div></article><footer><div></div></footer>
86 <!-- Test a container not at the top of the column/page. -->
87 <div class=
"multicol">
88 <div style=
"block-size: 25px"></div>
89 <div class=
"flexContainer">
90 <header><div></div></header><nav><div></div></nav>
91 <article><div></div></article><footer><div></div></footer>
95 <!-- Test a container with border and padding. -->
96 <div class=
"multicol">
97 <div class=
"flexContainer border-padding">
98 <header><div></div></header><nav><div></div></nav>
99 <article><div></div></article><footer><div></div></footer>
103 <!-- Test a container with border, padding, and row-gap. -->
104 <div class=
"multicol">
105 <div class=
"flexContainer border-padding" style=
"row-gap: 5px">
106 <header><div></div></header><nav><div></div></nav>
107 <article><div></div></article><footer><div></div></footer>