Skip to content

Commit 06b3a7c

Browse files
gsneddersgsnedders
authored
Merge 01f4d10 into f2de6e8 
2 parents f2de6e8 + 01f4d10 commit 06b3a7c

File tree

1 file changed

+151
-0
lines changed

1 file changed

+151
-0
lines changed

‎css/css-flexbox-1/percentage-heights-001.html

+151
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<!DOCTYPE html>
2+
3+
<title>CSS Flexbox: Definite cross sizes</title>
4+
5+
<link rel="stylesheet" href="support/flexbox.css">
6+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes">
7+
<link rel="author" title="Google Inc." href="https://www.google.com/">
8+
<meta name="flags" content="dom" />
9+
10+
<script src="/resources/testharness.js"></script>
11+
<script src="/resources/testharnessreport.js"></script>
12+
<script src="support/check-layout-th.js"></script>
13+
14+
<style>
15+
.rect {
16+
width: 50px;
17+
height: 50px;
18+
background-color: blue;
19+
}
20+
21+
.flexbox {
22+
width: 50px;
23+
outline: 3px solid black;
24+
}
25+
26+
27+
.flexbox > * {
28+
min-height: 0;
29+
min-width: 0;
30+
}
31+
32+
.flexbox > div > div {
33+
overflow: hidden;
34+
}
35+
</style>
36+
37+
<body onload="checkLayout('.flexbox')" style="height: 800px;">
38+
<div id=log></div>
39+
40+
41+
<p>This test verifies that we consider flex items' cross sizes to be definite
42+
if the align value is stretch (the default)</p>
43+
44+
<p>Tests that we get a definite size in the simple case:</p>
45+
<div class="flexbox" data-expected-height="50">
46+
<div data-expected-height="50">
47+
<div style="height: 50%" data-expected-height="25">
48+
<div class="rect" data-expected-height="50"></div>
49+
</div>
50+
</div>
51+
</div>
52+
53+
<p>Tests that we get a definite size in a wrapping flexbox:</p>
54+
<div class="flexbox wrap" data-expected-height="50">
55+
<div data-expected-height="50">
56+
<div style="height: 50%" data-expected-height="25">
57+
<div class="rect" data-expected-height="50"></div>
58+
</div>
59+
</div>
60+
</div>
61+
62+
<p>Tests that we get an indefinite size when not stretch-aligning, despite
63+
definite size on container:</p>
64+
<div class="flexbox wrap" style="height: 50px;" data-expected-height="50">
65+
<div class="align-self-flex-start" data-expected-height="50">
66+
<div style="height: 50%" data-expected-height="50">
67+
<div class="rect" data-expected-height="50"></div>
68+
</div>
69+
</div>
70+
</div>
71+
72+
<p>Tests that we get a definite size in a definite-height flexbox:</p>
73+
<div class="flexbox" style="height: 50px;" data-expected-height="50">
74+
<div data-expected-height="50">
75+
<div style="height: 50%" data-expected-height="25">
76+
<div class="rect" data-expected-height="50"></div>
77+
</div>
78+
</div>
79+
</div>
80+
81+
<p>Tests that we get a definite size in a nested flexbox where only the outer
82+
one has an explicit height:</p>
83+
<div class="flexbox" style="height: 50px;" data-expected-height="50">
84+
<div class="flexbox" data-expected-height="50">
85+
<div data-expected-height="50">
86+
<div style="height: 50%" data-expected-height="25">
87+
<div class="rect" data-expected-height="50"></div>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
93+
<p>Tests that we get a definite size in a nested flexbox where only the outer
94+
one has an explicit height and has an opposite direction:</p>
95+
<div class="flexbox" style="height: 50px;" data-expected-height="50">
96+
<div class="flexbox column" data-expected-height="50">
97+
<div class="flex-one" data-expected-height="50">
98+
<div style="height: 50%" data-expected-height="25">
99+
<div class="rect" data-expected-height="50"></div>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
105+
<p>Tests that we respect min-height, on child of a flex item with percent
106+
height that's treated as definite:</p>
107+
<div class="flexbox" style="height: 50px;" data-expected-height="50">
108+
<div data-expected-height="50">
109+
<div style="height: 50%; min-height: 30px;" data-expected-height="30">
110+
<div class="rect" data-expected-height="50"></div>
111+
</div>
112+
</div>
113+
</div>
114+
115+
<p>Tests that max-height also supports percentages:</p>
116+
<div class="flexbox" data-expected-height="50">
117+
<div data-expected-height="50">
118+
<div style="max-height: 50%" data-expected-height="25">
119+
<div class="rect" data-expected-height="50"></div>
120+
</div>
121+
</div>
122+
</div>
123+
124+
<p>Tests that percentage sizes can also be definite:</p>
125+
<div class="flexbox" style="height: 10%;" data-expected-height="80">
126+
<div data-expected-height="80">
127+
<div style="height: 50%" data-expected-height="40">
128+
<div class="rect" data-expected-height="50"></div>
129+
</div>
130+
</div>
131+
</div>
132+
133+
<p>Tests that we use a definite size even when a percentage size is not definite</p>
134+
<div>
135+
<div class="flexbox" style="height: 10%;" data-expected-height="50">
136+
<div data-expected-height="50">
137+
<div style="height: 50%" data-expected-height="25">
138+
<div class="rect" data-expected-height="50"></div>
139+
</div>
140+
</div>
141+
</div>
142+
</div>
143+
144+
<p>Tests that we don't mix up widths and heights</p>
145+
<div class="flexbox" style="height: 50px; width: 100px;" data-expected-height="50">
146+
<div style="width: 100px;" data-expected-height="50" data-expected-width="100">
147+
<div style="width: 50%" data-expected-width="50">
148+
<div class="rect" data-expected-height="50" data-expected-width="50"></div>
149+
</div>
150+
</div>
151+
</div>

0 commit comments

Comments
 (0)