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 row 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-row-vertical-rl-2-ref.html">
11 <meta name=
"assert" content=
"This test verifies fragmentation of fixed block-size flex items in a block-size:auto single-line row flex container, with various combinations of margin/border/padding, alignments, and column-gap. The block-size of the flex container is made shorter than <header>.">
15 writing-mode: vertical-rl;
23 border:
5px solid orange;
24 margin-block-end:
5px; /* Just to separate each sub-testcase visually. */
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
<header>. */
37 border-block-width:
10px;
41 /* Note: flex items are in visual order as
"CMYK": cyan, magenta, yellow, black. */
42 header, nav, article, footer {
52 align-self: flex-start;
67 <!-- Basic one without any margin/border/padding. -->
68 <div class=
"multicol">
69 <div class=
"flexContainer">
70 <header></header><nav></nav><article></article><footer></footer>
74 <!-- Test a container with margin-block-start. -->
75 <div class=
"multicol">
76 <div class=
"flexContainer" style=
"margin-block-start: 25px">
77 <header></header><nav></nav><article></article><footer></footer>
81 <!-- Test a container not at the top of the column/page. -->
82 <div class=
"multicol">
83 <div style=
"block-size: 25px"></div>
84 <div class=
"flexContainer">
85 <header></header><nav></nav><article></article><footer></footer>
89 <!-- Test a container with border and padding. -->
90 <div class=
"multicol">
91 <div class=
"flexContainer border-padding">
92 <header></header><nav></nav><article></article><footer></footer>
96 <!-- Test a container with border, padding, and column-gap. -->
97 <div class=
"multicol">
98 <div class=
"flexContainer border-padding" style=
"column-gap: 4px">
99 <header></header><nav></nav><article></article><footer></footer>