2 <!-- Any copyright is dedicated to the Public Domain.
3 http://creativecommons.org/publicdomain/zero/1.0/ -->
6 <title>CSS Flexbox Test Reference: Fragmentation of multi-line column flex container
</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/">
12 writing-mode: vertical-lr;
20 border:
5px solid orange;
21 margin-block-end:
5px; /* Just to separate each sub-testcase visually. */
25 /* border-width is
0 by default; some sub-testcases will increase it. */
26 border:
0 solid lightgray;
31 border-block-width:
10px;
35 /* Note: flex items are in visual order as
"CMYK": cyan, magenta, yellow, black. */
36 header, nav, article, footer {
44 inset-inline-start:
0;
51 inset-inline-start:
30px;
57 inset-block-start:
25px;
58 inset-inline-start:
35px;
65 inset-inline-start:
70px;
67 .border-padding
> header, .border-padding
> nav, .border-padding
> footer {
68 inset-block-start:
5px;
70 .border-padding
> article {
71 inset-block-start:
30px;
76 <!-- Basic one without any margin/border/padding. -->
77 <div class=
"multicol">
78 <div class=
"flexContainer">
79 <header></header><nav></nav><article></article><footer></footer>
83 <!-- Test a container with margin-block-start. -->
84 <div class=
"multicol">
85 <div class=
"flexContainer" style=
"margin-block-start: 25px">
86 <header></header><nav></nav><article></article><footer></footer>
90 <!-- Test a container not at the top of the column/page. -->
91 <div class=
"multicol">
92 <div style=
"block-size: 25px"></div>
93 <div class=
"flexContainer">
94 <header></header><nav></nav><article></article><footer></footer>
98 <!-- Test a container with border and padding. -->
99 <div class=
"multicol">
100 <div class=
"flexContainer border-padding">
101 <header></header><nav></nav><article style=
"inset-block-start: 30px"></article><footer></footer>
105 <!-- Test a container with border, padding, and row-gap. -->
106 <div class=
"multicol">
107 <div class=
"flexContainer border-padding">
108 <header></header><nav></nav><article style=
"inset-block-start: 35px"></article><footer></footer>