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
|
<!DOCTYPE html>
<html>
<head>
<title>CSS Regions: Auto-height regions inside fixed sized flexbox</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 respect the flex grow property when placed
inside a fixed sized flexbox with a single row.">
<link rel="match" href="reference/autoheight-regions-in-fixed-sized-flexbox-001-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: 200px;
width: 100px;
background-color: blue;
}
.flex {
display: flex;
height: 200px;
width: 500px;
}
.fromFlow1 {
flow-from: flow1;
flex-grow: 0;
}
.fromFlow2 {
flow-from: flow2;
flex-grow: 1;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you can see two squares placed on the same horizontal line. Each square consists of two
vertical halves. The left square has the left half colored green and the right half colored blue.
The right square has left half colored blue and the right half colored green.</li>
<li>You shouldn't see any red.</li>
</ul>
<div class="content1">
XXXXX<br>XXXXX<br>XXXXX<br>XXXXX<br>
XXXXX<br>XXXXX<br>XXXXX<br>XXXXX<br>
XXXXX<br>XXXXX<br>XXXXX<br>XXXXX<br>
XXXXX<br>XXXXX<br>XXXXX<br>XXXXX<br>
XXXXX<br>XXXXX<br>XXXXX<br>XXXXX<br>
</div>
<div class="content2">
XXXXX<br>XXXXX<br>XXXXX<br>XXXXX<br>
XXXXX<br>XXXXX<br>XXXXX<br>XXXXX<br>
XXXXX<br>XXXXX<br>
</div>
<div class="flex">
<div class="fromFlow1">
</div>
<div class="fromFlow2">
</div>
<div id='fixed'>
</div>
<div class="fromFlow1">
<p class="red"> </p>
</div>
</div>
</body>
</html>
|
