blob: 8a9c0c5e7c6cb27e79488d998b7aa401ad8e6265 (
plain)
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
139
140
141
142
143
144
145
146
147
148
149
150
151
|
<!DOCTYPE html>
<title>CSS Flexbox: Definite cross sizes</title>
<link rel="stylesheet" href="support/flexbox.css">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes">
<link rel="author" title="Google Inc." href="https://www.google.com/">
<meta name="flags" content="dom" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<style>
.rect {
width: 50px;
height: 50px;
background-color: blue;
}
.flexbox {
width: 50px;
outline: 3px solid black;
}
.flexbox > * {
min-height: 0;
min-width: 0;
}
.flexbox > div > div {
overflow: hidden;
}
</style>
<body onload="checkLayout('.flexbox')" style="height: 800px;">
<div id=log></div>
<p>This test verifies that we consider flex items' cross sizes to be definite
if the align value is stretch (the default)</p>
<p>Tests that we get a definite size in the simple case:</p>
<div class="flexbox" data-expected-height="50">
<div data-expected-height="50">
<div style="height: 50%" data-expected-height="25">
<div class="rect" data-expected-height="50"></div>
</div>
</div>
</div>
<p>Tests that we get a definite size in a wrapping flexbox:</p>
<div class="flexbox wrap" data-expected-height="50">
<div data-expected-height="50">
<div style="height: 50%" data-expected-height="25">
<div class="rect" data-expected-height="50"></div>
</div>
</div>
</div>
<p>Tests that we get an indefinite size when not stretch-aligning, despite
definite size on container:</p>
<div class="flexbox wrap" style="height: 50px;" data-expected-height="50">
<div class="align-self-flex-start" data-expected-height="50">
<div style="height: 50%" data-expected-height="50">
<div class="rect" data-expected-height="50"></div>
</div>
</div>
</div>
<p>Tests that we get a definite size in a definite-height flexbox:</p>
<div class="flexbox" style="height: 50px;" data-expected-height="50">
<div data-expected-height="50">
<div style="height: 50%" data-expected-height="25">
<div class="rect" data-expected-height="50"></div>
</div>
</div>
</div>
<p>Tests that we get a definite size in a nested flexbox where only the outer
one has an explicit height:</p>
<div class="flexbox" style="height: 50px;" data-expected-height="50">
<div class="flexbox" data-expected-height="50">
<div data-expected-height="50">
<div style="height: 50%" data-expected-height="25">
<div class="rect" data-expected-height="50"></div>
</div>
</div>
</div>
</div>
<p>Tests that we get a definite size in a nested flexbox where only the outer
one has an explicit height and has an opposite direction:</p>
<div class="flexbox" style="height: 50px;" data-expected-height="50">
<div class="flexbox column" data-expected-height="50">
<div class="flex-one" data-expected-height="50">
<div style="height: 50%" data-expected-height="25">
<div class="rect" data-expected-height="50"></div>
</div>
</div>
</div>
</div>
<p>Tests that we respect min-height, on child of a flex item with percent
height that's treated as definite:</p>
<div class="flexbox" style="height: 50px;" data-expected-height="50">
<div data-expected-height="50">
<div style="height: 50%; min-height: 30px;" data-expected-height="30">
<div class="rect" data-expected-height="50"></div>
</div>
</div>
</div>
<p>Tests that max-height also supports percentages:</p>
<div class="flexbox" data-expected-height="50">
<div data-expected-height="50">
<div style="max-height: 50%" data-expected-height="25">
<div class="rect" data-expected-height="50"></div>
</div>
</div>
</div>
<p>Tests that percentage sizes can also be definite:</p>
<div class="flexbox" style="height: 10%;" data-expected-height="80">
<div data-expected-height="80">
<div style="height: 50%" data-expected-height="40">
<div class="rect" data-expected-height="50"></div>
</div>
</div>
</div>
<p>Tests that we use a definite size even when a percentage size is not definite</p>
<div>
<div class="flexbox" style="height: 10%;" data-expected-height="50">
<div data-expected-height="50">
<div style="height: 50%" data-expected-height="25">
<div class="rect" data-expected-height="50"></div>
</div>
</div>
</div>
</div>
<p>Tests that we don't mix up widths and heights</p>
<div class="flexbox" style="height: 50px; width: 100px;" data-expected-height="50">
<div style="width: 100px;" data-expected-height="50" data-expected-width="100">
<div style="width: 50%" data-expected-width="50">
<div class="rect" data-expected-height="50" data-expected-width="50"></div>
</div>
</div>
</div>
|
