2 <!-- Any copyright is dedicated to the Public Domain.
3 http://creativecommons.org/publicdomain/zero/1.0/ -->
6 <title>CSS Flexbox Test: Fragmentation of fixed block-size single-line column 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-single-column-vertical-rl-2-ref.html">
11 <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.">
15 writing-mode: vertical-rl;
23 border:
5px solid orange;
24 margin-block-end:
5px; /* Just to separate each sub-testcase visually. */
29 flex-direction: column;
31 /* border-width is
0 by default; some sub-testcases will increase it. */
32 border:
0 solid lightgray;
33 /* Block-size is deliberately made shorter than all its flex items. */
37 border-block-width:
10px;
41 /* Note: flex items are in visual order as
"CMYK": cyan, magenta, yellow, black. */
42 header, nav, article, footer {
49 nav, article, footer {
55 align-self: flex-start;
70 <!-- Basic one without any margin/border/padding. -->
71 <div class=
"multicol">
72 <div class=
"flexContainer">
73 <header></header><nav></nav><article></article><footer></footer>
77 <!-- Test a container with margin-block-start. -->
78 <div class=
"multicol">
79 <div class=
"flexContainer" style=
"margin-block-start: 25px">
80 <header></header><nav></nav><article></article><footer></footer>
84 <!-- Test a container not at the top of the column/page. -->
85 <div class=
"multicol">
86 <div style=
"block-size: 25px"></div>
87 <div class=
"flexContainer">
88 <header></header><nav></nav><article></article><footer></footer>
92 <!-- Test a container with border and padding. -->
93 <div class=
"multicol">
94 <div class=
"flexContainer border-padding">
95 <header></header><nav></nav><article></article><footer></footer>
99 <!-- Test a container with border, padding, and row-gap. -->
100 <div class=
"multicol">
101 <div class=
"flexContainer border-padding" style=
"row-gap: 5px">
102 <header></header><nav></nav><article></article><footer></footer>