blob: c27af532169a349be42379ab9949afec15b47ae2 (
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
|
<!DOCTYPE html>
<html>
<title>CSS Flexbox: Resolving relative height content within a flex container against flexed size</title>
<link rel="author" title="Microsoft" href="https://www.microsoft.com/" />
<link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes" />
<link rel="issue" href="https://github.com/w3c/csswg-drafts/issues/1679" />
<meta name="assert" content="This test checks that percentage heights of content within a flex item are resolved against the flexed item" />
<style>
.flexbox {
display: flex;
min-height: 100%;
}
.column {
flex-flow: column;
}
.column-wrap {
flex-flow: column wrap;
}
.flexbox > div {
background: teal;
flex-grow: 1;
}
.flexbox span {
height: 100%;
background: orange;
display: block;
}
.vert-wm {
writing-mode: vertical-rl;
}
.horiz-wm {
writing-mode: horizontal-tb;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.flexbox')">
<div id=log></div>
<!-- The wrapper divs are here to give the flexbox something to fill -->
<!-- definite unwrapped column flexbox -->
<div style="height: 100px;">
<div class="flexbox column" style="height: 0">
<div>
<span data-expected-height="100"></span>
</div>
</div>
</div>
<!-- definite wrapped column flexbox -->
<div style="height: 100px;">
<div class="flexbox column-wrap" style="height: 0">
<div>
<span data-expected-height="50"></span>
</div>
<div>
<span data-expected-height="50"></span>
</div>
</div>
</div>
<!-- indefinite unwrapped column flexbox -->
<div style="height: 100px;">
<div class="flexbox column">
<div>
<span data-expected-height="0"></span>
</div>
</div>
</div>
<!-- indefinite unwrapped column flexbox where item doesn't stretch -->
<div style="height: 100px;">
<div class="flexbox column">
<div style="align-self: flex-start">
<span data-expected-height="0"></span>
</div>
</div>
</div>
<!-- indefinite wrapped column flexbox -->
<div style="height: 100px;">
<div class="flexbox column-wrap">
<div>
<span data-expected-height="0"></span>
</div>
<div>
<span data-expected-height="0"></span>
</div>
</div>
</div>
<!-- indefinite unwrapped column flexbox, with orthogonal-flow flex item. The
flex item's main size (height) is definite, since it's the item's inline
size, and inline sizes always end up definite. -->
<div style="height: 100px;">
<div class="flexbox column">
<div class="vert-wm">
<span data-expected-height="100"></span>
</div>
</div>
</div>
<!-- indefinite unwrapped row-oriented vertical-writing-mode flexbox, with
orthogonal-flow (horizontal-writing-mode) flex item. The flex item's
height (main size) is definite, since its parent flex container has a
definite main size, because the flex container's main axis is its
inline-axis and inline sizes are definite. -->
<div style="height: 100px;">
<div class="flexbox vert-wm">
<div class="horiz-wm">
<span data-expected-height="100"></span>
</div>
</div>
</div>
</body>
</html>
|
