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
|
<!DOCTYPE html>
<html>
<head>
<title>CSS Regions: Auto-height regions inside fixed sized flexbox with column flow</title>
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow">
<meta name="flags" content="ahem">
<meta name="assert" content="Test checks that auto-height regions placed inside a fixed sized flexbox with
column flow have the correct computed height. There are two regions placed inside the same flex container
having the same 'grow' value. The space should be distributed evenly between the two.">
<link rel="match" href="reference/autoheight-regions-in-fixed-sized-flexbox-002-ref.html">
<style>
.content1, .content2 {
font-family: Ahem;
line-height: 1em;
font-size: 20px;
}
.content1 {
color: green;
flow-into: flow1;
}
.content2 {
color: blue;
flow-into: flow2;
}
#fixed {
height: 100px;
width: 200px;
background-color: blue;
flex-grow: 0;
}
.flex {
display: flex;
height: 400px;
width: 200px;
flex-direction: column;
}
.fromFlow1 {
flow-from: flow1;
flex-grow: 1;
}
.fromFlow2 {
flow-from: flow2;
flex-grow: 1;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you can see two squares: a green square at the top and a blue square at the bottom.</li>
<li>The two squares should be of the same size.</li>
<li>You shouldn't see any red.</li>
</ul>
<div class="content1">
XXXXXXXXXX<br>XXXXXXXXXX<br>
XXXXXXXXXX<br>XXXXXXXXXX<br>
XXXXXXXXXX<br>XXXXXXXXXX<br>
XXXXXXXXXX<br>XXXXXXXXXX<br>
XXXXXXXXXX<br>XXXXXXXXXX
</div>
<div class="content2">
XXXXXXXXXX<br>XXXXXXXXXX<br>
XXXXXXXXXX<br>XXXXXXXXXX<br>
XXXXXXXXXX<br>
</div>
<div class="flex">
<div class="fromFlow1">
</div>
<div class="fromFlow2">
</div>
<div id='fixed'>
</div>
<!-- This shouldn't get any content if the flex container distributes space evenly between the first two
regions. -->
<div class="fromFlow1">
<p class="red"> </p>
</div>
</div>
</body>
</html>
|
