1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ -->
<!-- Testcase for how we fragment an empty fixed-height flex container, with
margin/border/padding that are larger than the available height,
and with the flex container having "flex-direction: column".
-->
<html>
<head>
<style>
.multicol {
height: 10px;
width: 100px;
column-width: 20px;
column-fill: auto;
border: 2px solid orange;
margin-bottom: 2px;
}
.flexContainer {
display: flex;
flex-direction: column;
background: teal;
/* border-width is 0 by default; some sub-testcases will increase it. */
border: 0 dashed black;
}
</style>
</head>
<body>
<!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
<!-- =================================== -->
<!-- margin-top is the available height: -->
<div class="multicol">
<div class="flexContainer" style="height: 8px;
margin-top: 10px"></div>
</div>
<!-- margin-top is larger than available height: -->
<div class="multicol">
<div class="flexContainer" style="height: 8px;
margin-top: 11px"></div>
</div>
<!-- margin-bottom is exactly the available height: -->
<div class="multicol">
<div class="flexContainer" style="height: 8px;
margin-bottom: 10px"></div>
</div>
<!-- margin-bottom is larger than available height: -->
<div class="multicol">
<div class="flexContainer" style="height: 8px;
margin-bottom: 11px"></div>
</div>
<!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
<!-- =================================== -->
<!-- border-top-width is the available height: -->
<div class="multicol">
<div class="flexContainer" style="height: 8px;
border-top-width: 10px"></div>
</div>
<!-- border-top-width is larger than available height: -->
<div class="multicol">
<div class="flexContainer" style="height: 8px;
border-top-width: 11px"></div>
</div>
<!-- border-bottom-width is exactly the available height: -->
<div class="multicol">
<div class="flexContainer" style="height: 8px;
border-bottom-width: 10px"></div>
</div>
<!-- border-bottom-width is larger than available height: -->
<div class="multicol">
<div class="flexContainer" style="height: 8px;
border-bottom-width: 11px"></div>
</div>
<!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
<!-- ==================================== -->
<!-- padding-top is the available height: -->
<div class="multicol">
<div class="flexContainer" style="height: 8px;
padding-top: 10px"></div>
</div>
<!-- padding-top is larger than available height: -->
<div class="multicol">
<div class="flexContainer" style="height: 8px;
padding-top: 11px"></div>
</div>
<!-- padding-bottom is exactly the available height: -->
<div class="multicol">
<div class="flexContainer" style="height: 8px;
padding-bottom: 10px"></div>
</div>
<!-- padding-bottom is larger than available height: -->
<div class="multicol">
<div class="flexContainer" style="height: 8px;
padding-bottom: 11px"></div>
</div>
<!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
<!-- =========================================== -->
<!-- border+padding-top is the available height: -->
<div class="multicol">
<div class="flexContainer" style="height: 8px;
border-top: 5px;
padding-top: 5px"></div>
</div>
<!-- padding-top is larger than available height: -->
<div class="multicol">
<div class="flexContainer" style="height: 8px;
border-top: 6px;
padding-top: 6px"></div>
</div>
<!-- padding-bottom is exactly the available height: -->
<div class="multicol">
<div class="flexContainer" style="height: 8px;
border-bottom: 5px;
padding-bottom: 5px"></div>
</div>
<!-- padding-bottom is larger than available height: -->
<div class="multicol">
<div class="flexContainer" style="height: 8px;
border-bottom: 6px;
padding-bottom: 6px"></div>
</div>
</body>
</html>
|
