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 single-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-rl;
20 border:
5px solid orange;
21 margin-block-end:
5px; /* Just to separate each sub-testcase visually. */
26 box-decoration-break: clone;
32 /* Note: flex items are in visual order as
"CMYK": cyan, magenta, yellow, black. */
37 nav, article, footer {
48 inset-inline-start:
5px;
54 inset-inline-start:
10px;
59 <!-- Test a container with margin-block-start. -->
60 <div class=
"multicol">
61 <div class=
"flexContainer" style=
"margin-block-start: 25px">
62 <header></header><nav></nav><article></article><footer></footer>
66 <!-- Test a container not at the top of the column/page. -->
67 <div class=
"multicol">
68 <div style=
"block-size: 25px"></div>
69 <div class=
"flexContainer">
70 <header></header><nav></nav><article></article><footer></footer>
74 <!-- Test a container with row-gap. -->
75 <div class=
"multicol">
76 <div class=
"flexContainer">
77 <header></header><div class=
"gap"></div><nav></nav><div class=
"gap"></div><article></article><div class=
"gap"></div><footer></footer>